强制内部元素溢出-x [英] force inner elements to overflow-x
本文介绍了强制内部元素溢出-x的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的结构是:
#navBar {
height: 55px;
width: 40px;
overflow-x:scroll;
overflow-y:hidden;
}
<div id="navBar">
akdhbaIDBhbfbhwhfbaibf
<div style="width: 80; float: left; text-align: center;">
<img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav1" />
<br />
<span style="font-size: 80%">Nav1</span>
</div>
<div style=" width: 80; float: left; text-align: center;">
<img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav2" />
<br />
<span style="font-size: 80%">Nav2</span>
</div>
<div style=" width: 80; float: left; text-align: center;">
<img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav3" />
<br />
<span style="font-size: 80%">Nav3</span>
</div>
</div>
我希望所有的内部 div
s将 scroll-x
并且不打破这一行。我怎样才能做到这一点?
I want that all of the inner div
s will scroll-x
and not break the line. How can I achieve that?
推荐答案
这将有效:
<style type="text/css">
#navBar {
height: 55px;
width: 80px;
overflow-x: scroll;
overflow-y:hidden;
white-space: nowrap;
}
#navBar div {
display: inline-block;
}
</style>
和HTML部分:
<div id="navBar">
akdhbaIDBhbfbhwhfbaibf
<div style="width: 100px; text-align: center; background-color: red;">
<img src="" alt="Nav1" />
<br />
<span style="font-size: 80%">Nav1</span>
</div>
<div style=" width: 100px; text-align: center;">
<img src="" alt="Nav2" />
<br />
<span style="font-size: 80%">Nav2</span>
</div>
<div style=" width: 100px; text-align: center; background-color: red;">
<img src="" alt="Nav3" />
<br />
<span style="font-size: 80%">Nav3</span>
</div>
</div>
不需要 float:left;
CSS 。
这篇关于强制内部元素溢出-x的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文