Question

我试图将2个div放在彼此旁边，其中包含按钮列表，并且两个按钮下方都有另一个按钮，但是我遇到了问题。我添加了浮动：向左导航左侧和导航右侧但导航右侧不在导航左侧？ #lower的下方按钮是不是留在#container的父div中？这是fiddle

我已经尝试了我所知道的一切来解决这个问题（这不是很多！）但无济于事。谢谢你的帮助:)）

以下是代码：

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

Answer 1

您需要考虑border样式属性。这就是为什么将每个元素的宽度设置为50％会导致第二个元素换行。将宽度设置为较小的量（如49％）将解决问题。

另外，更改

#nav-right{position: relative; left: 50%;}

到

#nav-right{position: relative;}

Answer 2

浮点数加上+ 3px到div，所以你有50％+ 50％+额外的像素。（也许你应该向左导航左边导航向右导航并将宽度设置为较低值？）那就是为什么你有这个左右块的问题。并且下方按钮问题修复了添加宽度：自动到ul a，＃lower。

Answer 3

需要改变三件事：由于花车，你的div宽度应该是49％。同时删除你的div的position:relative;。要调整按钮，只需从#lower中删除width:100%即可。

这是 fiddle

Answer 4

您已将#nav_left和#nav_right的宽度设置为50％。你还添加了1px边框。因此每个<div>需要额外增加2个像素。所以你必须要么是边框，要么是减小宽度。
您已让<div>向左浮动。因此left: 50%是不必要的。

此外，我的下方按钮a#lower也会出现同样的问题。此设置为width: 100%以及padding: 9px，border: 1px。这也是你的#container。

不听话的Div！（没有正确浮动）

4 个答案:

不听话的Div！ （没有正确浮动）

4 个答案:

不听话的Div！（没有正确浮动）