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

他们处于单独的行，因为是块行元素。

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

p {
  display:inline-block;
}

（你应该给出你想要定位一个公共类的所有个元素，并将其用作选择器，因为上面的目标都是＆＃39; s。

或者只使用元素（默认情况下它们会内联）：

<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

为什么不将整个部分包装在标签中，然后为您想要的每种不同风格使用创建范围？这将是很多与类相关的跨度，虽然它似乎是一个相当常见的方式，人们这样做。

这是一种可能性（利用分离内容和风格的“最佳实践”）：

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

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

将不同的CSS样式应用于彼此相邻的单词

2 个答案: