Question

我有两个div。一个应该是我的菜单，第二个是标题。当我试图使< li >项彼此浮动时，它从它的位置下降并影响我的标题div;它进入了标题div（它将自己置于我的头衔中）。

HTML：

    <div class="menu">
    <ul>
    <li>Home</li>
    <li>Query</li>
    <li>Reports</li>
    </ul>
    </div>
    <center><h3 class="empbox">Attendnace & Absence</h3></center>

CSS：

 .empbox 
 {
  height:30px;
  background:-moz-linear-gradient(left, #FFFFFF 0%,#6C8483 50%,#FFFFFF 100%); 
  background:-webkit-linear-gradient(left, #FFFFFF 0%,#6C8483 50%,#FFFFFF 100%); 
  background:linear-gradient(left, #FFFFFF 0%,#6C8483 50%,#FFFFFF 100%);
  width:100%;
  display:block;
  color:White;
  margin-top:190px;
  padding-top:10px;
  }
 .menu
 {
  background:white; color:Black;
 }
 .menu ul
 {
  list-style:none;
  padding-right:20px;
 }
 .menu li 
  {
  float:left;
  }

请不要将我的问题投下来，告诉我有什么问题，所以我不再重复了！否则，我不会知道出了什么问题，我将一直被拒绝。

我希望我的李超越标题。我想知道为什么< li >不是受影响的唯一因素。我指定< li >元素而不是整个div。

Answer 1

无法发表评论，所以让我们这样做......我实际上不知道你想要什么。你能描述一下好一点吗？无论如何，您不需要浮动列表项。如果你浮动ul并向display: inline提供<li>，那应该足够了。在任何情况下，这都解决了一个问题。现在等待你的回复。

在这里：http://jsfiddle.net/33VyN/

Answer 2

您可以使用清除浮动的<div>来包装标题。另外，<center>标签也已弃用。

<div style="text-align:center;clear:both;">
 <h3 class="empbox">Attendnace & Absence</h3>
</div>

如何仅在不影响其他元素的情况下浮动<li>元素</li>

2 个答案: