改成<div style="overflow:hiddenwidth:1000px">就好了
你就设置100PX宽他当然浮动不上去。而且你还设置了多余部分隐藏
添加 float:left即可横向排列。
添加 display: flex即可横向排列。当设置 display:flex时， float:left会失效。
看你截图，li应该是已经实现横向排列了，只是宽度不够，导致字体竖向显示了。给li设置宽度应该就可以了
你把这段代码粘贴在dreamweaver里，打开来看看。就明白了。重点在ul的float，a的float,li的display这三个属性，你打开来看看就明白了。希望对你有帮助，不懂的可以在线call me.<html>
<head>
<style type="text/css">
ul
{
float:left
width:100%
padding:0
margin:0
list-style-type:none
}
a
{
float:left
width:7em
text-decoration:none
color:white
background-color:purple
padding:0.2em 0.6em
border-right:1px solid white
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>
</body>
</html>
