web-dev-qa-db-ja.com

<li>を並べて表示するにはどうすればよいですか？

リストアイテムが1行で表示されるナビゲーションメニューを作成しようとしています。どうすればいいですか？

htmlcsshtml-lists
29
Upcyclist
li {
    display: inline;
}

編集：display: inline：私は通常float: left自分自身、代わりにanthony-arnoldの答えです（彼に私の賛成票を送ります！）。

とにかく、どちらの方法でもlisが1行で表示されますが、インライン要素と浮動要素は異なる動作をします。レイアウトのスタイル設定に応じて、どちらかを選択する必要があります。

42
BoltClock

いくつかの状況では、これを行うこともできます。

 li {
 float：left; 
}
16
Anthony

私のお気に入りの方法は、幅、高さ、マージン、パディングを使用できるので、使用することです：

li { display: inline-block; }

しかし、使用を修正するためにIEでレンダリングの問題が発生します（順序が重要です）。

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

このテーマに関する最良のリソースの1つは、 http://css.maxdesign.com.au/listamatic/ （ただし、少し時代遅れですが）です。

両方のli {display: inline;}およびli {float: left;}必要な効果に応じて。

たとえば、「単純な水平リスト」を探してください http://css.maxdesign.com.au/listamatic/horizo​​ntal01.htm

3
Eelvex
ul {display: inline;} 
ul li { list-style: none;display: inline;}
1
joe

このスタイリングを試してみます

li{
height:20px;
float:left;
list-style-type: none;
width:70px;
padding:3px;
border-right:1px solid #3687AF;
background-color: #015287;
background-repeat: no-repeat;
background-position: center 30px;
}

それは確かに動作します...

1
Subbu
ul {
    float: right;  to <li> go to the Right or Left side
}

ul li {
    display: inline-block;
    padding: 10px;
    margin-top: 5px;
}

「li」で「float：」を使用すると、リストの順序が逆になります。

1
Rafael Rodrigues

できること：

li {
    float: left;
    display: inline;
}

ブロックの特性を維持したいが、それでもサイドバイサイドが必要な場合は、次のようにします。

li {
    float: left;
    display: inline-block;
}
0
Sarfraz