Применить различные стили CSS к словам друг другу

Question

Я хочу поместить разные слова вместе в <div>, и каждое слово имеет разные font-size и различные стили CSS.

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

Это мой код:

<p style="font-size: 11px; color: #ffffff;">more hungry?</p><p style="font-size: 15px; color: #ffffff;">want a drink too?</p><p style="font-size: 13px; color: #ffffff;">have it with natural flavour?</p><p style="font-size: 20px; color: #ffffff;">eat atleast 2 pieces of fruit?</p><p style="font-size: 8px; color: #ffffff;">a snack every hour?</p> 

Answer 1

Они на отдельно линии, потому что <p> являются блок линейных элементов.

Одним из решений было бы изменить стиль этих <p> элементов inline-block:

p { 
    display:inline-block; 
} 

(Вы, вероятно, следует дать всем <p> элементы, которые вы хотите предназначаться общий класс и использовать его в качестве селектора вместо этого, в качестве вышеуказанные цели все <p>'s).

Или просто использовать <span> элементы вместо (они рядный по умолчанию):

<span style="font-size: 11px; color: #ffffff;">more hungry?</span><span style="font-size: 15px; color: #ffffff;">want a drink too?</span><span style="font-size: 13px; color: #ffffff;">have it with natural flavour?</span><span style="font-size: 20px; color: #ffffff;">eat atleast 2 pieces of fruit?</span><span style="font-size: 8px; color: #ffffff;">a snack every hour?</span> 

Примечание хотя это встроенный CSS, как правило, не рекомендуется - вы должны использовать внешнюю таблицу стилей вместо этого.

Answer 2

Почему бы не обернуть весь раздел в теге <p>, а затем использовать создание диапазона для каждого стиля, который вы хотели бы иметь? Это будет много проходов с классами, хотя, похоже, это довольно распространенный способ, которым люди это делают.

Вот возможность (используя «наилучшую практику» разделение содержания и стиля):

<style> 
p {color: #ffffff;} 
span.1 {font-size: 11px;} 
span.2 {font-size: 15px;} 
span.3 {font-size: 13px;} 
span.4 {font-size: 20px;} 
span.5 {font-size: 8px;} 
</style>  


<p><span class="1">More hungry?</span> <span class="2">want a drink too?</span> <span class="3">have it with natural flavour?</span> <span class="5">eat at least 2 pieces of fruit?</span> <span class="6">a snack every hour?</span></p> 

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