0

これが私がやろうとしていることです: 私は<h1>要素、<time>要素、および<div>をすべて<header>ブラウザウィンドウの全幅である 内に持っています。要素は<h1>左側にある<time>必要があり、時間とともに幅が変化する要素は中央に配置する<div>必要があり、右側にある必要があります。

私はしばらくこれを解決しようとしてきましたが、運がありませんでした。おそらく、JavaScriptが必要ですか？また、（絶対配置を使用していると思いますか？）それらすべてを垂直方向に中央揃えにする必要があり、それらはすべて異なるフォントサイズです。

これまでのHTMLは次のとおりです。

<header>
    <h1>blahblah.com</h1>
    <time>THE TIME</time>
    <div id="controls">
        DISPLAY CONTROLS
    </div>
</header>

そしてCSS：

* {
    margin: 0px;
    padding: 0px;
}
header {
    background: black;
    color: white;
    width: 100%;
    font-family: wendy;
}
header h1 {
    display: inline-block;
    font-size: 40px;
    margin-left: 10px;
}
header time {
    font-size: 30px;
}
header #controls {
    display: inline-block;
}
#controls p {
    display: inline-block;
    font-size: 20px;
}

どうもありがとうございました！

4

1 に答える 1

1

Timeはインライン要素であるためtext-align: center、時間を中心にするにはヘッダーで十分です。inline-blockさらに、それらの不要なスタイルを取り除きます。

そして、ベースの整列スタイルシートは、このフィドルの例に縮小されます:

header { 
    width: 100%; 
    overflow: hidden;
    text-align: center;
} 
header h1 { 
    float: left;
} 
header #controls { 
    float: right;    
}

ヘッダーの高さを浮動要素の高さのいずれか高い方に確実に拡張するために、オーバーフローが追加されます。

于 2012-04-11T12:04:20.527 に答える