极客观点
项目管理
HarmonyOS
如题，我想写一段代码，让一个DIV里面的LI在超出DIV设定的宽度时不段行显示要怎么写要。我按百度上提供的方法写出来始终不对。谢谢各位大神哈；
比如我设置的DIV宽度是540PX。而LI的个数有10个；每个LI的宽度是100PX；我想要让这些LI在一行显示；而不是超过DIV宽度的时候断行显示； 求大神指教 ；
下面是我的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
.gun_box1{
width:540px;
height:100px;
background-color:#998811;
position:relative;
margin:300px auto;
overflow:hidden;
}
.gun_box1 ul{
position:absolute;
top:0;
left:0;
}
.gun_box1 ul li{
float:left;
margin-right:10px;
width:100px;
height:100px;
background-color:#118833;
list-style-type:none;
white-space:nowrap;
}
</style>
<script>
window.onload = function(){
var odiv_box1 = document.getElementById('odiv_1');
var oul_box1 = odiv_box1.getElementsByTagName('ul')[0];
var oli_box1 = oul_box1.getElementsByTagName('li');
oul_box1.innerHTML = oul_box1.innerHTML + oul_box1.innerHTML;
}
</script>
</head>
<body>
<div class="gun_box1" id="odiv_1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
1给li加上display:inline-block;属性
2给ul加上可以容纳li的宽度