1

I want to put different words together in a <div>, and each word has a different font-size and a different CSS styling.

I can manage the different font-sizes, but somehow the words are ordered in a list with line-height. This I do not want.

This is my code:

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

2 回答 2

3

它们位于单独的行上，因为<p>它们是块行元素。

一种解决方案是将这些<p>元素的样式更改为inline-block：

p {
  display:inline-block;
}

（你可能应该给所有<p>你想要定位一个公共类的元素，并将其用作选择器，因为上面的目标是 all <p>）。

或者只使用<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 - 您应该改用外部样式表。

于 2013-06-08T00:20:16.633 回答
0

为什么不将整个部分包装在<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>

我建议将跨度类命名为更具描述性的名称。但这应该可以解决问题，具体取决于您考虑的特定用途。

于 2013-06-08T00:57:18.883 回答