显示列表项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没有任何风格，只有那些从bootstrap 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;}

Answer 4

将它放在样式表上：

.something li div{display:inline;}

Answer 5

试试这个：在您的代码中 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>