Возможно ли предотвратить ли: прежде чем форсировать пункт пункта списка на следующую строку (JSFiddle внутри)?

Question

Я использую значки FontAwesome в качестве настраиваемых пуль для своих неупорядоченных списков, но с использованием li: before, похоже, изменяет поведение тегов абзаца в элементах списка.

JSFiddle для тега абзаца в действии в двух разных списках. Один с ли: раньше, один без.

HTML:

<ul class="before"> 
    <li>list item 1</li> 
    <li> 
     <p>list item 2 (paragraph)</p> 
     <p>list item 2 (sub paragraph)</p> 
    </li> 
    <li>list item 3</li> 
</ul> 
<br /> 
<br /> 
<ul> 
    <li>list item 1</li> 
    <li> 
     <p>list item 2 (paragraph)</p> 
     <p>list item 2 (sub paragraph)</p> 
    </li> 
    <li>list item 3</li> 
</ul> 

CSS:

.before li:before { 
    content:"B4"; 
    color: red; 
    margin-right: 8px; 
} 

Как я могу получить элемент списка пунктов появляться на той же строке, что и литий: раньше?

Answer 1

Будучи этими параграфами, это элементы блока, они запустит новую строку ... то есть, если вы не поплывете элемент перед ним. Есть некоторые другие вопросы стайлинга, которые возникают от этого, но я уверен, что вы можете понять те из (я компенсировал некоторые из вопросов, в моем примере):

http://jsfiddle.net/ryanwheale/ko2efv7b/2/

.before li:before { 
    content:"B4"; 
    color: red; 
    margin-right: 8px; 
    float: left; 
} 

Answer 2

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

Fiddle with hiding dots

CSS

.before li { 
    list-style: dot outside none; 
} 
.before li:before { 
    content:"B40M8UW0T?"; 
    color: red; 
    margin-right: 8px; 
    float: left; 
    list-style: dot outside none; 
    display: list-item; 
    position: relative; 
    z-index: 2; 
    background-color: white; 
} 

Fiddle with a green background illustrating the hack

Итак, в основном мы говорим браузеру, чтобы отобразить эту :before псевдо для отображения, как и сам в список-элемент, а затем скрывается результирующую точку пули для фактического элемента списка путем сопоставления фона-фона базового элемента. В скрипке я оставил зеленый цвет, чтобы проиллюстрировать это.

Это не идеальное решение, но не будет идеального решения для того, что вы хотите сделать без огромных усилий.

Cheers.