Показать в строке в div

-1

Я пытаюсь сделать большой нижний колонтитул. Я изо всех сил старался, чтобы ссылки отображались в строке, но я не могу этого сделать. Пожалуйста, помогите. БлагодаряПоказать в строке в div

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 

#footer{ 
    width:auto; 
    height:600px; 
    background:url(footer.png); 
} 

#footer div{float:left; width:43.5%} 
#footer div:nth-child(2n+1){clear:none} 
#footer div:nth-child(3n+1){clear:left} 
#footer div li a{float:none; width:auto; display:inline; font-size:1em; padding:0; line-height:1.5em; background-color:transparent} 
#footer .contribute{border:none; background-color:transparent} 

#footer div h4{transition:color 0.3s; -moz-transition:-color 0.3s; -ms-transition:color 0.3s; -o-transition:color 0.3s; -webkit-transition:color 0.3s} 

#footer div:hover h4{color:#e53b2c} 

#footer div:nth-child(2n){clear:left} 

#footer div{width:100%; clear:both} 

#footer .contribute{background-color:rgba(255,255,255,0.8); border-bottom:10px solid rgba(0,0,0,0.025); background-color: transparent; 
    border: medium none;} 

#footer div li {display:block; width:94.5%; float:left; font-size:0.95em; } 

#footer li{padding:0.125em 0} 

#footer a{border-bottom:1px solid rgba(0,0,0,0.1)} 

#footer a:hover{border-bottom:1px solid rgb(65,183,216)} 

#footer a:active, #footer a:focus { background-color:#e53b2c; border: none; } 

</style> 
</head> 
<body> 
    <div id="footer"> 
    <div class="contribute"> 
     <h4>Best of Design</h4> 
    <ul> 
     <li><a href="http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/">Responsive Design</a></li> 

    </ul> 
    </div> 
    <div class="contribute" > 
     <h4>Best of Coding</h4> 
    <ul> 
     <li><a href="http://www.smashingmagazine.com/learning-javascript-essentials-guidelines-tutorials/">JavaScript &amp; jQuery</a></li> 
    </ul> 
    </div> 
    <div id="contribute"> 
     <h4>Smashing Hub</h4> 
     <ul> 
      <li><a href="http://www.smashingmagazine.com">Smashing Magazine</a></li> 

     </ul> 
    </div> 
    <div class="contribute"> 
     <h4>Other Resources</h4> 
     <ul> 
      <li><a href="http://www.smashingmagazine.com/2011/09/08/to-five-smashing-years-and-a-free-anniversary-ebook-treat/">Free Anniversary eBook</a></li> 
     </ul> 
    </div>   
</div>  
</body> 
</html>

Вот визуальный дизайн, что я пытаюсь сделать, enter image description here

источник

2012-06-24 Fahad Uddin

Я не уверен, какой дизайн вы ищете. Почему у вас есть списки, в которых есть только один элемент? Все ли 4 ваших '' '' '' '' '' должны быть встроенными или вам нужны только ссылки, которые находятся рядом с элементом '

', который является встроенным? – Wex

@Wex: На данный момент я сохранил только один элемент. Я буду увеличивать предметы, когда покончу с этим. Да, все они должны быть встроенными. Я добавил изображение, чтобы сделать все более четким. –

Почему вы перезаписываете свойство '#footer div' снова и снова в вашем CSS? – Wex

Вы можете сделать это с помощью float: left; вместо display: inline;.

Проблема с CSS является то, что вы переопределить стиль для #footer div много:

#footer div{width:100%; clear:both}

Это один из них, и его главной причиной разрыва макета.

Попробуйте удалить часть стиля и реорганизовать ее, чтобы немного почистить. Вы поблагодарите нас за это.

«Если вы не можете понять свой собственный код, пришло время сделать перерыв и рефакторинг».

источник

2012-06-24 19:05:26 rcdmk

он объявляет его 5 раз ... – Wex

Обычный способ вы видите людей выполнить эту проблему с помощью float собственности. Обратите внимание, что я добавил overflow: hidden в #footer, чтобы очистить поплавки.

#footer { overflow: hidden; } 
.contribute { 
    float: left; 
    width: 25%; }

http://jsfiddle.net/Wexcode/nxvdG/

Если вы пытаетесь придерживаться, используя встроенный, вы будете использовать подобный код, только встроенные элементы ведут себя по-разному, когда застрял рядом друг с другом. Пробелы в вашей разметке, то есть </div> <div>, создадут промежуток между двумя элементами. Чтобы сделать так, чтобы элементы касались, вам нужно удалить пробел в вашей разметке, например </div><div>.

.contribute { 
    width: 25%; 
    display: inline-block; }

http://jsfiddle.net/Wexcode/TkxKm/

источник

2012-06-24 18:58:24 Wex

Видите ли, у меня уже есть 'float: left;' в моем коде, но это не работает. –

Ваш CSS невероятно запутанный. Я бы отказался от того, что у вас есть, и попытаюсь реализовать решение, которое я вам дал; информация, которую я вам дал, решит вашу проблему. – Wex

Показать в строке в div

', который является встроенным? – Wex

ответ

Смежные вопросы