0

我有一个包含以下元素的列表项：

  • 第一项
  • 另一个列表项
  • 沙子、砾石、粘土、陶瓷和耐火矿物 采矿和采石材料

而且我希望他们看起来他们确实在一行中看到了这个问题，或者如果项目变得太大，像这样很好地打破它：

  • 沙子、砾石、粘土、陶瓷和耐火矿物 采矿和采石材料大牌，很好地对齐

但相反，我的项目看起来像这样（屏幕截图）：

在此处输入图像描述

如您所见，它看起来并不好。这是我的 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

1 
<ul class="something">
  <li>
       This is where super long text goes text goes
  </li>
</ul>
于 2013-09-13T09:29:12.590 回答
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 回答
0

把它放在你的样式表上：

.something li div{display:inline;}
于 2013-09-13T09:38:48.187 回答
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 回答