Проблема с отображением элементов списка CSS

Question

У меня есть элемент списка, который имеет следующие элементы:

• Первый элемент
• Другой элемент списка
• песок, гравий, глина и керамические и тугоплавкие минералы Mining и Карьер материалы

и я хочу, чтобы они выглядели они выглядят выше в этом вопросе все в одной строке или, если элемент становится слишком большой перерыв, это красиво, как это:

• песок, гравий, глина и керамические и огнеупорные минералы отрасль горнодобывающей промышленности, материалы большого имя, которое устанавливающиеся красиво

Но вместо того, чтобы мои детали выглядеть следующим образом (снимок экрана):

Как вы можете видеть, это выглядит не очень хорошо. Это мой 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;}

Answer 4

Поместите на таблицу стилей:

.something li div{display:inline;} 

Answer 5

Попробуйте это: В коде дисплей: встроенный блок нарушает список. Так что попробуйте после удаления, что

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