web-dev-qa-db-ja.com

順序付けられていないリストアイテムのテキスト整列

順序付けされていないリストアイテムのテキストを、標準のディスク/ドットリストアイテムアイコンの横に「列」として表示する方法はありますか？スクリーンショットのペアを作成しました：

これは、リストアイテム内にテキストを含む標準の順序なしリストを使用した場合の外観です（li）。

enter image description here

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

enter image description here

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

よろしくお願いします！

ではごきげんよう、

ボー

htmlcsshtml-liststext-alignment
10
bomortensen

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

[〜＃〜] 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;
}
4
Rohit Azad

list-style-positionはあなたが探している物件です。すべてのブラウザで動作します。 （詳細については、 [〜＃〜] mdn [〜＃〜] を参照してください）

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

ただし、実際にはoutsideがデフォルト値です。おそらくどこかで上書きします。

7
KevinH

左側のフローティングリストアイテムは、列として表示するための最良の解決策だと思います。

このCSSコードはあなたを助けるかもしれません：

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

<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 Labore et dolore magnaaliqua。 Ut enim ad minim veniam、quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodoconsequat。
  • これはリストアイテムです-2
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur。 Excepteur sint occaecat cupidatat non proident、sunt in culpa qui officia deserunt mollit anim id estlaborum
  • これはリストアイテムです-4
0
Sakthivel