4


0

CSSを使用してテキストフラッシュをコンテナの下部に揃える方法は?

次の例では、サイト名テキストの下部「site name」とメニューテキスト「menu 1 menu 2 menu 3」の下部を、それらが入っているコンテナ(ヘッダー)の下部と同じ高さに揃えます。 現在のように、サイト名のテキストはコンテナの下端の上にあるピクセル数ですが、メニューテキストは同じエッジの上にあるピクセル数が異なります。 両方の要素が同じ線上にあるようにします。

行の高さを使用すると、さまざまな値で試行錯誤を繰り返すことができますが、結果はブラウザー間で一貫していません(例: SafariとChromeでそれらをフラッシュすることができますが、Firefoxは異なって見えます)。 もっと良い方法があるはずですか?

また、私がやった方法以外に、右下隅にメニューを強制するより良い方法はありますか?

ありがとう

        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, font, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            text-align: center;
        }

        #container {
            margin:0 auto;
            margin-top:20px;
            width:800px;
            border:1px solid red;
            text-align: left;
        }

        #header {
            float:left;
            position:relative;
            width:100%;
            border:1px solid green;
        }

        #sitename {
            float:left;
            left:0px;
            bottom:0px;
            margin:0;
            padding:0;
            border:1px solid blue;
        }

        #sitename h1 {
            font-weight: normal;
        }

        #menu {
            position:absolute;
            right:0;
            bottom:0;
            line-height:1em;
            float:right;
            list-style: none;
            border:1px solid blue;
        }

        #menu ul li {
            list-style: none;
            float:left;
            padding: 0 0 0 15px;
        }

        #sitename h1 {
            font-size: 3em;
        }










                site name



                    menu1
                    menu2
                    menu3





        here is some content.



        here is the footer.

5 Answer


1


`#sitename h1`に負のマージンを設定できます。 E.g.

#sitename h1 {
  font-size: 3em;
  margin-bottom: -9px;
}

トリッキーな部分は、すべてのブラウザーで正確に整列させることです。ピクセルごとに異なるためです。


1


h1`を div`でラップする必要はありません。 すでにブロックレベルの要素です。 このコードを試してください:

#header {
  float:left;
  position:relative;
  width:100%;
  border:1px solid green;
  height: 100px;
}

#sitename {
  position: absolute;
  float:left;
  left:0px;
  bottom:0px;
  margin:0;
  padding:0;
  border:1px solid blue;
  font-weight: normal;
  font-size:3em;
}

#menu {
  position:absolute;
  right:0;
  bottom:0;
  line-height:1em;
  float:right;
  list-style: none;
  border:1px solid blue;
}

#menu ul li {
  list-style: none;
  float:left;
  padding: 0 0 0 15px;
}




  site name



      menu1
      menu2
      menu3


0


次のように、現在の場所を基準にしてサイト名を配置することをお勧めします。

#sitename h1 {
   position: relative;
   top: 9px;
}

ただし、これは完全ではありません。異なるフォントが使用される場合、間隔が異なる可能性があるためです。 これは、現在のCSSプロパティで修正できるものではありません。 画像を検討してもいいですか? 常に同じ高さを維持するには?


0


適用されているリセットスタイルはありますか? 各ブラウザには、ヘッダーやリストなどの要素のパディングとマージンのデフォルトが異なります。 スタイルシートの先頭ですべてをリセットすると、すべてを簡単に並べることができます!

Eric MeyerのリセットCSSは、開始するのに適した場所です:http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/


0


ビューポートの幅を使用できる場合、任意の画面サイズに対して本当にうまく行うことができます。

#sitename h1 {
  font-size: 9vw;
  margin-bottom: -2.2vw;
}

これは、テキストをバックグラウンドでグラフィック要素として使用していたため便利でした。 通常、vfontで `font-size`を設定したくないでしょう(しかし、通常、以下の要素でフラッシュしたくないでしょう)。