Quick html markup issue

Question

Я пытаюсь сделать быструю разметку для своей страницы.

Я хочу, чтобы мой заголовок отображался в следующей строке моего тега <nav>, а не прямо рядом с ним. Как мне это сделать?

HTML:

<nav> 
    <ui> 
     <li>item1</li> 
     <li>item2</li> 
     <li>item3</li> 
    </ui> 
</nav> 

<section id='title'> 
    <div>title 1</div> 
    <div>texts here....</div> 
</section> 

CSS:

nav { 
    background-color: black; 
    text-align: center; 
} 
nav ui li{ 
    list-style: none; 
    font:bold .6em arial; 
    float: left; 
    margin: .3em; 
    padding: 1.3em; 
    background-color: #A8A8A8; 
} 

В название и тексты здесь ... находятся прямо рядом с моим меню, но я хочу их в меню. Как мне это сделать?

Answer 1

Вы должны загрузить свой код http://www.jsfiddle.net, задавая такие вопросы, как это ...

Во всяком случае, есть несколько альтернатив.

Например: Дайте СЧ или раздел #title, а clear: both атрибут:

#title { 
    clear: both; 
} 

Для ученых об этом, как сказали, что другие люди на этой странице, если есть и другие плавучие элементы справа из #title секции, следующий код будет соответствовать лучше:

#title { 
    clear: left; 
} 

Answer 2

Один из способов добавить:

width:100%; 
float:left; 

на навигацию.

В теге раздела нет причин опускаться ниже навигатора, так как ширина навигатора по умолчанию будет иметь меньшую ширину (которая не занимает всю ширину содержащего div). Это позволяет тегу раздела легко перемещаться вдоль области содержимого навигационного тега.

Answer 3

Используйте ясно, ч/б и и

<nav> 
    <ul> 
     <li>item1</li> 
     <li>item2</li> 
     <li>item3</li> 
    </ul> 
</nav> 



<section id='title'> 
     <div>title 1</div> 
     <div>texts here....</div> 
    </section> 

добавить в CSS #title {clear:both;}

http://jsfiddle.net/2Fgdw/

Answer 4

Прежде всего, измените ui тег в ul.

Неупорядоченный список в формате HTML должен быть <ul><li></li></ul>.

Просто добавили в CSS,

section{ 
    clear : left; 
} 

ИЛИ если у вас есть несколько разделов,

#title{ 
    clear : left; 
} 

clear:both не следует использовать, если у вас есть еще один плавучий объект справа от заголовка. Тогда изменение ширины до 100% также не будет хорошо для вас.

JSFIDDLE DEMO

Answer 5

Как Оптимус Прайм отметил, что то, что ui в вашем CSS должны быть ul - Оба <nav> и <section> элементы уровня блока и будет, естественно, ширина 100% и заставить следующий упасть на следующая строка.