Divs保持内嵌块屏幕更大
我在一个块中有一些div彼此靠近,我希望他们留在同一个块(线)上让屏幕更大(CTRL +),这里是我的代码( http://fiddle.jshell.net/YDyfy/), CSS:Divs保持内嵌块屏幕更大
#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停留在同一行/块
我是李很困惑。你希望他们都出现在同一行?或分开行吗?
如果你希望在窗口增加时将它们全部放在一行上,那么我认为你提供的小提琴没有问题。
如果您希望将它们全部放在单独的行中,请在您的CSS中将display
属性更改为block
。
小提琴它显示在对方之下,只需按CTRL - 两次,所以你可以看到他们在同一行,我希望他们一直保持这样的状态,如果我有更大的屏幕(如果我按CTRL +) – 2013-05-13 12:49:18
@MhmdRobaee你知道,这种行为与CTRL -/+是高度依赖用户的浏览器大小正确吗? – 2013-05-13 12:51:22
在容器上使用white-space:nowrap
(updated Fiddle)。
你的问题很不清楚,所以如果这不是你要找的东西,请不要开枪。
作为一般性旁注,您不应该在内联元素(如<a>
)内嵌入块级元素,如<div>
。如果有的话应该是<span>
元素。
好的解决方案 - 但是当你达到全宽时要小心,因为菜单会跳出页面的一边,迫使人们侧身滚动以达到菜单的末尾。 – Doug 2013-05-13 12:56:42
你做到了兄弟,非常感谢你,@doug你给了我同样的解决方案,也谢谢你! – 2013-05-13 12:59:23
我得到了另一个问题:/我不能看到divs当我CTRL +,它应该给我滚动条,让我滚动到divs,所以我可以看到它,有什么解决方案? – 2013-05-13 13:01:00
你错过了填充,边距和字体的一些像素,我认为由于这个原因你得到了这个问题。 以百分比或EM使用字体大小。
你确定它不是填充引起的?你想保持一个规则吗?或更多规则? – DiederikEEn 2013-05-13 12:47:38
您是否看不到我在您之前提出的问题中发布的额外评论?我认为这是为了设置固定的像素宽度,需要在百分比时间内完成所有事情。 http://*.com/questions/16520783/background-gets-smaller-and-divs-get-under-each-other-while-changing-screen-size/16521020#16521020 – Doug 2013-05-13 12:52:14
One rule,inline-block – 2013-05-13 12:55:41