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

我想把2个div彼此相邻，其中包含按钮列表与他们下面的另一个按钮，但我有问题。我添加了浮动：左侧导航左侧和导航右侧，但导航右侧不左侧导航左侧？另外下边的按钮#lower不在#container的父div中？这里是fiddle 不听话的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>

来源

2014-04-06 Margate

尝试减小div的宽度。使用Firefox上的元素检查器来减小宽度，直到显示正确为止（右键单击检查元素） – dewd

将宽度设置为49％ – davidcondrey

如果容器宽度小于100px，该怎么办？ – guest

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

另外，更改

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

到

#nav-right{position: relative;}

来源

2014-04-06 17:59:28 ElGavilan

好吧，我明白了。这是合理的和有效的！我没有考虑超过100％，但现在已经确定。非常感谢您的帮助。 – Margate

不客气！如果这有帮助，请考虑标记为答案。谢谢 – ElGavilan

浮动加号+的3px到div，所以你有50％+ 50％+额外的像素（也许你应该浮动导航栏左侧，右侧导航栏右侧并将宽度设置为较低值？）。这就是为什么你有这个左右块问题。和更低的按钮问题修复与增加宽度：自动到ul a，#lower。

来源

2014-04-06 18:01:43 potashin

这工作完美。我不经常使用width：auto，因为我并不真正了解它做了什么，但现在我做了...非常感谢您的帮助。 – Margate

需要更改三件事：由于浮动，您的div宽度应为49％。也删除您的divs的position:relative;。要调整按钮，只需从#lower中删除width:100%，你就很好。

这里是你fiddle

来源

2014-04-06 18:03:20

完成！我删除位置：相对和宽度：100％根据您的指示/小提琴。非常感谢你。 – Margate

您已设置宽度#nav_left和#nav_right为50％。您还添加了1px边框。所以每个<div>将需要2个像素额外。所以你必须选择0边框或减小宽度。
您已使<div>左移。所以left: 50%是不必要的。

另外，我看到相同类型的问题为您的下部按钮，a#lower。这设置为width: 100%以及padding: 9px,border: 1px。这也溢出了你的#container。

来源

2014-04-06 18:08:21

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

回答

相关问题

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