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

这告诉我：

aaa
bbb
ccc

我该怎么做：

aaa bbb ccc

我必须为 CSS 添加什么？

4

6 回答 6

16

不要使用浮动，不，不。利用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; }
于 2013-06-15T10:47:59.763 回答
4

您可以使用display:inline

#list li {
   display:inline;
}

http://jsfiddle.net/btBdW/

于 2013-06-15T10:44:19.653 回答
3

提及float:left_li

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

工作代码

于 2013-06-15T10:44:54.790 回答
3

尝试这个

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

</style>
于 2013-06-15T11:09:30.780 回答
1 
#list {
list-style:none;
}

#list li {
float:left;
}
于 2013-06-15T10:44:42.253 回答
1
  • 啊啊啊
  • 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;
}
    于 2013-06-15T10:58:32.913 回答