显示列表项css的问题

Question

我有一个列表项，其中包含以下元素：

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

我想让他们看看，他们在这个问题上看上去，都是一行，或者如果这个项目太大，就像这样很好地打破它：

• 砂、砾石、粘土、陶瓷和耐火材料-采矿和采石材料-名声很好

但是我的项目看起来像这样(屏幕截图)：

​

​

就像你看到的，看起来不太好。这是我的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来使屏幕截图中的列表看起来像这个问题中的第一个？

Answer 1

<ul class="something">
  <li>
       This is where super long text goes text goes
  </li>
</ul>

Answer 2

只需加上

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

它应该能按你的意愿工作。

Answer 3

如果需要水平列表，请使用以下CSS：

li{display:inline;}