1

さまざまな単語を a にまとめたいのですが<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>
4

2 に答える 2

3

<p>ブロックライン要素であるため、それらは別々の行にあります。

<p>1 つの解決策は、これらの要素のスタイルを次のように変更することinline-blockです。

p {
  display:inline-block;
}

（おそらく<p>、共通のクラスを対象とするすべての要素を指定し、代わりにそれをセレクターとして使用する必要があります。上記はすべてを対象としているためです<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>、作成したいスタイルごとに create a span を使用してみませんか? これは、かなり一般的な方法のように見えますが、クラスでは多くのスパンになります。

可能性は次のとおりです（コンテンツとスタイルを分離する「ベストプラクティス」を利用）：

<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 に答える