html - 順序付けられていないリスト項目のテキストの配置

Question

順序付けされていないリスト項目のテキストを、標準のディスク/ドット リスト項目アイコンの横に「列」として表示する方法があるかどうか疑問に思っています。スクリーンショットのペアを作成しました：

これは、リスト項目 (li) 内にテキストを含む標準的な順序なしリストを使用した場合の外観です。

そして、これは私がそれをどのように見せたいかです：

画像/divのハックなしでこれは可能ですか? ;-) 標準の CSS 設定があるかどうかを調べてみましたが、何も見つからなかったようです。

よろしくお願いします！

ではごきげんよう、

ボー

Answer 1

list-style-positionお探しの物件です。すべてのブラウザで動作します。(詳細はMDNを参照してください)

ul {
   list-style-position: outside;
   /* You may want to add an additional padding-left: */
   padding-left: 1.5em;
}

しかし、実際outsideにはデフォルト値です。おそらく別の場所に上書きします。

Answer 2

次のように簡単にコーディングできます。

HTML

  <ul>
    <li>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>

CSS

ul{
  margin:0;
  padding:0 20px;
} 
ul li    {
  padding:0;
  width:150px;
  background:red;
  margin:10px 0;
}

Answer 3

フローティング リスト アイテムを左側に配置することが、それらを列として表示するための最良の解決策だと思います。

この CSS コードは次のことに役立ちます。

<style type="text/css">
    ul > li {
        margin: 0 10px;
        width: 150px;
        float: left;
    }
</style>

Answer 4

<ul> タグの下に open(<li>) タグと closed(</li>) タグを使用してテキストを囲むだけで十分です。

例えば、

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
    <li>This is list item - 2</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
    <li>This is list item - 4</li>
</ul>

出力は、

• Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• これはリスト項目です - 2
• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui office deserunt mollit anim id est labum
• これはリスト項目です - 4

Answer 5

これを追加

ul {
  display:inline-block;
}

あなたのCSSコードに。