web-dev-qa-db-ja.com

CSSのみを使用して、HTMLリストを垂直ではなく水平に表示する方法

HTMLリストから作成されたメニューを水平に表示するため、これが必要です。

ページのレイアウトを変更し始めると面倒になる可能性があるため、絶対配置を使用しないことを好みます。

サブリストのインデントも削除したいと思います。出来ますか？

htmlcssmenupositioninghorizontallist
39
M. A. Kishawy

以下のようなものを使用する必要があります

#menu ul{
  list-style: none;
}
#menu li{
  display: inline;
}
        
<div id="menu">
  <ul>
    <li>First menu item</li>
    <li>Second menu item</li>
    <li>Third menu item</li>
  </ul>
</div>
63
Ravia

非常に簡単：

ul.yourlist li { float:left; }

または

ul.yourlist li { display:inline; }
13
roman

display: inline-flexを使用

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex
}
<div id="menu">
  <ul>
    <li>1 menu item</li>
    <li>2 menu item</li>
    <li>3 menu item</li>
  </ul>
</div>

display: inline-blockを使用

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  display: inline-block;
}
<div id="menu">
  <ul>
    <li>1 menu item</li>
    <li>2 menu item</li>
    <li>3 menu item</li>
  </ul>
</div>
10
Tushar