Html 显示列表项css时出现问题

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

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

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

• 砂、砾石、粘土、陶瓷和耐火矿物采矿和采石材料大名鼎鼎

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

正如你所看到的，它看起来不太好。这是我的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和li

没有任何样式，只是从bootstrap css继承的样式

我应该使用哪种css，以便屏幕截图中的列表看起来像这个问题中的第一个列表？

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


这就是超长文本的去向

只需添加

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

---

而且它应该按照您的意愿工作。

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

---

li{display:inline；}

将其放在样式表上：

.something li div{display:inline;}

---

试试这个：在你的代码中显示：内联块正在破坏列表。所以试着去掉它

<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>

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

Hi Joris，我不能这样做，因为我们使用的插件将div放在我的span元素周围，或者也不可能更改内联样式？