5

見出し ( <h1>) があり、その下に一種のキャッチフレーズがあります。（<small>タグを使用font-sizeして特定のパーセントに設定したのでfont-size、小さな画面の見出しを変更すると完全に整列します。emそれが重要な場合は、単位を使用しています。）

最初は、<small>タグはメインの見出しの下にうまく配置されていましたが、HTML5 DOCTYPE 宣言を忘れていることに気付きました。それで、この抜けを発見して修正したところ、スペーシングがすべて間違っていました。

これが私のコードです：

HTML:

<h1 class="banner">Justin Wilson<br /><small>WEB + GRAPHIC DESIGNER</small></h1>

CSS:

h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }

h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100; }

そして、これが前後です：

Doctype宣言の前後

StackOverflow を検索しましたが、続行する方法がわかりません。<br />タグは単純に改行すると読みましたが、行間を継承し、line-spacing: (value)機能せず、マージンやパディングも機能しません。

私が必要としているのは、単純なクロスブラウザー ソリューションです。スクリーンショットには Chrome を使用しました。IE6-7 のサポートは必要ありませんが、IE8 のサポートは必要です。

4

6 に答える 6

3

line-heightcss プロパティ ( W3 Schoolsを参照)を制御して、すべてのブラウザーが各行に同じ高さを設定するようにする必要があります。

実際には、テキストを含むほぼすべての要素に対してこれを行うことをお勧めします。これが、ほとんどの人が生産に CSS リセットを使用し、すべての要素にデフォルトの行の高さを設定する理由です。

この場合、<span>との<h1>行の高さが異なる可能性があります。

私が<br />アドバイスしない CSS でプロパティを変更していない限り、タグは何も悪いことをしていないと確信しています。

同じ要素に他のフォント プロパティを設定する場合に備えて、簡略版もあります。

font: <font weight> <font size>/<line height> <font face>;

例えば：

font: bold 12px/18px sans-serif;

お役に立てれば。

于 2013-05-06T18:15:29.047 に答える
2

をドロップして<br />、要素の表示<small>をブロックに設定します。

http://cssdeck.com/labs/uoqfo4xw

<h1 class="banner">Justin Wilson <small>WEB + GRAPHIC DESIGNER</small></h1>

h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }

h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100;
display: block; }
于 2013-05-06T18:59:22.933 に答える
0

別の方法として、スパンを に設定してから、タグdisplay: block;の を調整します。line-height<h2>

<br />タグを使用する代わりに、これを行います。

于 2013-05-06T18:26:55.997 に答える
0

Ultimately the answer that works as the best solution is found here (3rd example):

http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head

@cimmanon posted a very helpful solution, but to be safe, I'll stick with what Steve Faulkner said about this being a more semantic and SEO-friendly solution over using an <h1> tag and <h2> tag for a subheading, or inline elements inside a heading tag, regardless of styling.

Here's the solution:

HTML:

  <header>
    <h1 class="banner">Justin Wilson</h1>
    <p>WEB + GRAPHIC DESIGNER</p>
  </header>

CSS:

  h1.banner {
  text-align: center;
  display: block;
  font-family: 'arvil';
  font-size: 6.5em;
  color: #94babd;
  font-weight: normal;
  margin: 1em 0 0 0;/*purely for display purposes, really*/ }

  header > p {font-family: Helvetica, sans-serif;
  font-size: 1.75em;
  color: #888;
  letter-spacing: 1px;
  font-weight: 100;
  text-align: center;
  margin:0;  }

And the live demo (might not look good to you without the free Arvil font, from Lost Fonts).

http://cssdeck.com/labs/xysgkffs

Thanks for all the answers thus far.

于 2013-05-06T20:28:07.350 に答える
-1

更新しました....

HTML と CSS に変更<small>し、行を追加します<p>h1.banner > p

margin: 0 auto;

フィドル

于 2013-05-06T18:27:50.193 に答える