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

首先，请将您的ui代码更改为ul。

HTML中的无序列表应该类似于<ul><li></li></ul>。

刚刚添加到css，

section{
    clear : left;
}

如果您有多个部分，则为

#title{
    clear : left;
}

如果你有另一个浮动对象到标题右边，则不应使用

clear:both。然后将宽度更改为100％也不会对你有好处。

<强> JSFIDDLE DEMO

Answer 2

在提出这样的问题时，您应该将代码上传到http://www.jsfiddle.net

无论如何，有几种选择。

例如：为nav或#title部分提供clear: both属性：

#title {
    clear: both;
}

对于它的学者，就像其他人在本页所说的那样，如果#title部分右侧还有其他浮动元素，则以下代码更适合：

#title {
    clear: left;
}

Answer 3

一种方法是添加：

width:100%;
float:left;

到nav的css。

section标签没有理由落在导航下方，因为导航的宽度将默认为某个较小的宽度（不占用包含div的整个宽度）。这使得section标签可以轻松地沿着nav标签的内容向左浮动。

Answer 4

使用明确的黑白和

<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 5

正如擎天柱所指出的那样，你的css ui应该是ul - <nav>和<section>都是块级元素，自然是100％宽度并强制下一行下降到下一行。

快速的HTML标记问题

5 个答案: