ULリストを1行にスタイルする方法

126

このリストを1行で表示したい。

リストアイテム1
リスト項目2

次のように表示する必要があります

*リストアイテム2 *リストアイテム2

使用するCSSスタイルは？

css

— RD
ソース

私はこの質問には、ブートストラップに固有ではない知っているが、私は、ブートストラップ見つかったサムネイルはテキスト、画像、映像の水平方向のリストなどのために非常に有用であること

— アヌパム

184

ul li{
  display: inline;
}

詳細については、listamatic の基本リストオプションと基本水平リストを参照してください。（リンクについてはダニエル・ストレートに感謝します）。

また、コメントで指摘されているように、ulのスタイリングや、liとli自体の内部にある要素はすべて見栄えを良くするために必要です。

— rz。
ソース

7

これで作業は完了ですが、要素の間隔を適切に保つためにパディングを含めることもできます

— Rob Allen

1

正解です。これにより、リストが水平になります。ul、li、liに含まれるすべてのものにスタイルを追加して、見栄えを良くしたいと思うでしょう。

— rz。

1

弾丸を留めるには？または、他の方法で弾丸を発射することはできますか？

— RD

1

@DotDotが指摘するように、{display：inline}を使用すると、箇条書きのスタイルが削除されます。これを回避するには：1.代わりに{float：left}を使用します（ただしIE9では機能しません）。2.左パディングを追加し、背景画像を追加します（背景画像としての弾丸です）。

— Adrien Be

26

最新のブラウザでは、次のことができます（CSS3準拠）

ul
{
  display:flex;  
  list-style:none;
}

<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>

スニペットを展開

— davidlbaileysr
ソース

15

HTMLコード：

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSSコード：

ul.list li{
  width: auto;
  float: left;
}

— アデル・アージ
ソース

9

次のようなものも試してみてください：

HTML

 <ul class="inlineList">
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

CSS

 .inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

説明のためにコードペンを作成しました：http ://codepen.io/agm1984/pen/mOxaEM

— agm1984
ソース

0

で、ブートストラップ用.list-inlineCSSクラス

<ul class="list-inline">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

参照：https : //www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h

— マティー・ゴジュラ
ソース