记录工作中很实用的html布局时能应用到的小技巧!
背景提要:在一块小的布局中,需要有一个横向滚动条,但当你在css中键入overflow-x:auto之后;由于当div或其他标签没有设定固定宽,而导致overflow-x:auto失效;所以我用一个小的JS辅助解决。
javascript代码
<script>
function window_onload(){
var Div=document.getElementById("stafflist");
var Li=Div.getElementsByTagName("li");
var x=Li.length;
document.getElementById("theul").style.width=60*x+"px";
}
</script>
这样,就可以在一块很小的模块内自如的用到横向滚动条。
html代码
<body οnlοad="window_onload() ">
<div class="mui-col-xs-9 stafflist" id="stafflist">
<ul id="theul">
<li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
<li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
<li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
<li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
<li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
<li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
<li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
<li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
<li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
<li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
</ul>
</div>
</body>
.stafflist{overflow-x:auto; }
.stafflist ul{ height:auto; overflow:hidden;}
.stafflist li{ width:52px; float:left; margin-right:8px;}
.stafflist li p{ line-height:28px;}