Question

我在一个区块中有一些彼此靠近的div，我希望它们在屏幕更大（CTRL +）时保持在同一个区块（线），这是我的代码（http://fiddle.jshell.net/YDyfy/）， CSS：

    #menu{
width:100%;
height:40px;
margin:auto;
padding:0 0 12;
background:url(file:///C:/Users/Windows7/Desktop/imgbg.jpg) repeat 0 0 #f8f8f8;
border:1 solid;
border-width:0 1 1;
box-shadow:0px 1px 10px #000;
text-align:center;
position:fixed;
top:0;
left:0;
right:0;
}
.menutext{
font-family:Helvetica neue,Helvetica,Arial,Verdana,Sans-serif;
font-size:16;
display:inline-block;
border:solid;
border-color:#aaa #ccc;
border-width:0 0 5 6;
padding:6 40 7 40;
margin:7 15;
box-shadow:-1px 2px 5px #404040;
}

HTML：

    <div id="menu">
<a href="#div1" class="scroll"><div class="menutext" linkId="div1">Description</div></a>
<a href="#div2" class="scroll"><div class="menutext" linkId="div2">Shipping and payments</div></a>
<a href="#div3" class="scroll"><div class="menutext" linkId="div3">Seller information</div></a>
<a href="#div4" class="scroll"><div class="menutext" linkId="div4">Feedback</div></a>
</div>

简单地说，我希望当屏幕变得更大时，div保持在同一行/块

Answer 1

在容器（updated Fiddle）上使用white-space:nowrap。

你的问题很不清楚，所以如果这不是你想要的，请不要开枪。

作为一般性旁注，您不应将<div>等块级元素嵌套在内联元素（如<a>）中。如果有的话，那些应该是<span>元素。

Answer 2

我有点困惑。你希望它们出现在同一条线上吗？或者在不同的路线上？

如果你想在窗口增加时将它们全部放在一行上，那么我认为你提供的小提琴没问题。

如果您希望将它们全部放在不同的行中，请将CSS中的display属性更改为block。

Answer 3

你在填充，边距和字体中错过了一些px，我认为由于这个原因你得到了问题。使用百分比或EM的字体大小。

Divs在屏幕变大时保持内联阻止

3 个答案: