0

これらの要素を持つリスト項目があります:

  • 最初の項目
  • 別のリスト項目
  • 砂、砂利、粘土、セラミックおよび耐火鉱物 採掘および採石材料

そして、私は彼らがこの質問の上にあるようにすべて1行で見ているように見えるようにしたい、またはアイテムが大きくなりすぎた場合は、次のようにうまく分割してください:

  • 砂、砂利、粘土、セラミックおよび耐火鉱物 採掘および採石材料のビッグネーム

しかし、代わりに私のアイテムは次のようになります(スクリーンショット):

ここに画像の説明を入力

ご覧のとおり、見栄えがよくありません。これは私のhtml構造です:

<ul class="something">
  <li>
     <div style="width:auto; display:inline-block;">
       <span>This is where super long text goes text goes</span>
     </div>
  </li>
</ul>

ul and liブートストラップCSSから継承されたものだけにスタイルはありません。

スクリーン ショットのリストがこの質問の最初のリストのように見えるようにするには、どの CSS を使用すればよいですか?

4

5 に答える 5

0

これを試してください: あなたのコードで display:inline-blockがリストを壊しています。だからそれを取り除いてから試してください

<ul >
  <li><div style="width:auto; "><span>First item</span></div></li>
  <li><div style="width:auto;"><span>Another list item</span></div></li>
 <li><div style="width:auto;"><span>Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials</span></div></li>
</ul>
于 2013-09-13T09:46:09.810 に答える
0

追加するだけ

ul.something li div {vertical-align: top}

そして、あなたが望むように動作するはずです。

于 2013-09-13T09:36:10.357 に答える
0

水平方向のリストが必要な場合は、次の CSS を使用します。

li{display:inline;}

于 2013-09-13T09:36:52.623 に答える