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

これは私に見せます：

aaa
bbb
ccc

どのように私は作ることができます:

ああ、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 に答える
1 
#list {
list-style:none;
}

#list li {
float:left;
}
于 2013-06-15T10:44:42.253 に答える
1
  • ああ
  • bbb
  • ccc

    • これは私に見せます：

    ああ、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 に答える