Question

<ul id="list">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

这告诉我：

aaa
bbb
ccc

我该如何制作：

aaa bbb ccc

我必须为css添加什么？

Answer 1

不要使用浮动，不能使用。使用inline-block

HTML：

 <ul id="list">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>

CSS：

ul li {
    display:inline-block;
    background-color:#eee;
    list-style-type:none;
    margin-right:-4px;
    padding:10px;
    border-right:1px solid white;
}

演示：http://jsfiddle.net/QPuTs/1/

如果IE7（将其放在<head>标签中）

<!--[if lte IE 7]>
<style>
ul li {
display:inline;
zoom:1;
}
</style>
<![endif]-->

或者像你这样在你的外部CSS：

ul li { display: inline-block; zoom: 1; *display: inline; }

Answer 2

您可以使用display:inline

#list li {
   display:inline;
}

http://jsfiddle.net/btBdW/

Answer 3

在float:left

中提及li

#list li{
    list-style-type:none;
    float:left;
}

Working Code

Answer 4

试试这个

<style>
ul
{
    list-style-type:none;   
}
ul li {
    float:left;
    margin:0 2px;
}

</style>

Answer 5

#list {
list-style:none;
}

#list li {
float:left;
}

Answer 6

AAA

BBB

CCC

这告诉我：

AAA BBB CCC

所以你想显示为水平菜单？是

然后在这里看代码

在css中

#list{
width:900px;
height:30px;
background-color:green;
}
#list ul{
padding:0px;
margin:0px;
list-style-type:none;
}
#list ul li{
display:inline;
list-style-type:none;
}
#list ul li a{
text-decoration:none;
font-size:12px;
padding:10px 5px;
}

列表中的方向css

6 个答案: