css - 快速html标记问题

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;
}

这里的标题和文字...就在我的菜单旁边，但我希望它们在菜单下。我该怎么做呢？

score 3 · Accepted Answer

首先，请将您的ui标签更改为ul.

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

刚刚添加到css，

section{
    clear : left;
}

或者，如果您有多个部分，

#title{
    clear : left;
}

clear:both如果标题右侧有另一个浮动对象，则不应使用。然后将宽度更改为 100% 对您也不利。

JSFIDDLE 演示

score 1 · Accepted Answer

提出此类问题时，您应该将代码上传到http://www.jsfiddle.net ...

无论如何，有几种选择。

例如：给 nav 或 #title 部分一个clear: both属性：

#title {
    clear: both;
}

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

#title {
    clear: left;
}

score 0 · Accepted Answer

一种方法是添加：

width:100%;
float:left;

到导航的CSS。

部分标签没有理由低于导航，因为导航的宽度将默认为一些较小的宽度（不占用包含 div 的整个宽度）。这使得 section 标签可以很容易地沿着 nav 标签的内容向左浮动。

score 0 · Accepted Answer

使用 clear b/w 和

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

score 0 · Accepted Answer

正如 Optimus Prime 所指出的，它ui应该是你的 css 中的内容ul- 两者<nav>和<section>都是块级元素，自然会是 100% 宽度并强制下一个下降到下一行。

css - 快速html标记问题

5 回答 5

Related

Reference