Html 不听话的迪夫！（未正确浮动）

我试着把两个div放在一起，其中包含按钮列表，两个按钮下面都有另一个按钮，但我遇到了问题。我添加了浮动：左导航到左导航和右导航，但右导航不在左导航旁边？此外，“降低”按钮“降低”没有停留在“容器”的父div中？这是你的电话号码

我已经尝试了我所知道的一切来解决这个问题（这不是很多！），但是没有用。谢谢您的帮助：）

代码如下：

#container{width: 100%; border: 1px solid red;}
#nav-left, #nav-right{width: 50%; border: 1px solid black; display: block; padding: 10px 0px 10px 0px;}
#nav-left{position: relative; float: left;}
#nav-right{position: relative; left: 50%;}
#lower{width: 100%; border: 1px solid black; display: block; padding: 10px 0px 10px 0px;}
li {list-style: none;}  
ul a, #lower {color: black; text-decoration: none; text-align: center;  background-color: yellow; display: block; margin: 10px; padding: 9px; border: 1px solid black; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;}
ul a:hover, #lower:hover {background-color: #fff;} 


<div id="container">
  <ul id="nav-left">
    <li><a href="#">Left Button</a></li>
    <li><a href="#">Left Button</a></li>
    <li><a href="#">Left Button</a></li>
    <li><a href="#">Left Button</a></li>
    <li><a href="#">Left Button</a></li>
  </ul>

  <ul id="nav-right">
    <li><a href="#">Right Button</a></li>
    <li><a href="#">Right Button</a></li>
    <li><a href="#">Right Button</a></li>
    <li><a href="#">Right Button</a></li>
    <li><a href="#">Right Button</a></li>
  </ul>
  <div style="clear: both"></div>
  <a id="lower" href="#">Lower Button</a></li>
</div>

#容器{宽度：100%；边框：1px实心红色；}
#导航左，导航右{宽度：50%；边框：1px纯黑色；显示：块；填充：10px 0px 10px 0px；}
#导航左{位置：相对；浮动：左；}
#导航右侧{位置：相对；左侧：50%；}
#下部{宽度：100%；边框：1px纯黑色；显示：块；填充：10px 0px 10px 0px；}
li{列表样式：无；}
ul a，#下{颜色：黑色；文本装饰：无；文本对齐：中心；背景颜色：黄色；显示：块；边距：10px；填充：9px；边框：1px纯黑色；-moz边框半径：12px；-webkit边框半径：12px；边框半径：12px；}
ula:hover，#lower:hover{背景色：#fff；}

您需要考虑

边框

样式属性。这就是为什么将每个元素的宽度设置为50%会导致第二个元素换行。将宽度设置为较小的值（如49%）将解决此问题

还有，改变

#导航右{位置：相对；左：50%；}

到

---

#nav right{position:relative；}

浮点加上div+3px，因此您有50%+50%+额外像素。（也许您应该将nav向左浮动，将nav向右浮动，并将宽度设置为较低的值。）这就是为什么会出现这种左右块问题的原因。和降低按钮问题，通过增加宽度修复：自动到ul a，#降低。

需要更改三件事： 由于浮动，您的div宽度应为49%。 移除

位置：相对。
要调整按钮，只需将
宽度：100%
从#下部移除即可

给你

您已将
#nav_left
和
#nav_right
的宽度设置为50%。此外，您还添加了1px边框。因此，每个
将需要额外的2个像素。因此，您必须将边界设置为0或减小宽度

您已使两个
向左浮动。所以
左：50%
是不必要的

此外，我还发现您的下按钮
a#lower
也存在同样的问题。这被设置为
宽度：100%
以及
填充：9px
，
边框：1px
。这也会溢出您的
#容器
请尝试减小div的宽度。使用Firefox上的元素检查器减小宽度，直到它正确显示（右键单击inspect element）将宽度设置为49%，如果容器宽度小于100px怎么办？@dewd好的建议，我从来没有真正使用过Firefox，但自从读了你的帖子后，我就开始玩它了。我想我将来会用这种方式去除虫…@Margate还为firefox买了firebug。这对于调试javascript
console.log（“helloworld”）