我有这个CSS代码:
.topBar {
width:100%;
height:70px;
position:absolute;
/*position:fixed;
z-index:999;*/
top:0;
left:0;
padding:10px;
color:#000000;
background-color:#eeeeee;
border-bottom:2px solid #F36F25;
}
但因为它是100%宽并且有10px填充,它显示了一个水平滚动条.
我怎么能阻止这种情况发生但保持填充和100%宽度?
我试过了:
overflow-x: none;
在我的CSS中,但我仍然希望水平滚动条显示屏幕变得太小
最佳答案
@H_404_25@基本上div.topBar是100%10px(x2).所以它实际上超过100%(因此滚动框).执行此操作的一般方法是在父div中添加另一个div并添加padding:10px.另一种方法是使用Box-sizing:border-Box,它实际上符合100%规则!
看看这个sample.