0

ちょっとしたプロジェクトで問題が発生しました。div であるナビゲーション バーがあり、その中にリンクがありますが、ページのサイズを変更するたびに、最後の 2 つが新しい行を開始します。リンクを水平位置に保ち、スクロールバーをページに追加したいと思います。たとえば、Google を使用しているときにブラウザーのサイズを変更すると、オーバーフローしたコンテンツが改行されず、スクロールバーが追加されます。親 div を使用して最小幅を設定しようとしましたが、どちらも機能しませんでした。

CSS:

.topBar {
    background-color:rgb(161,35,35);
    position:relative;
    display:inline-block;
    width:100%;
    text-align:center;
    height:40px;
}
.text2 {
    font-size:35;
    text-decoration:none;
    margin-left:4%;
    margin-right:4%;
}
.parent {
    min-width:100%;
}

そしてHTML：

<div class="parent">
    <div class="topBar">
        <a class="text2" href="placeholder.html">Media Mash</a>
        <a class="text2" href="placeholder.html">Film</a>
        <a class="text2" href="placeholder.html">Music</a>
        <a class="text2" href="placeholder.html">Games</a>
        <a class="text2" href="placeholder.html">Books</a>
    </div>
</div>
4

4 に答える 4

3

コンテンツの幅が広すぎる場合、ページは自動的に水平にスクロールします。ブロック内の多くの要素を幅が広すぎるようにする場合は、親を幅が広すぎるようにするか (この場合は適用されません)、親がインライン要素をラップするのを停止する必要があります (適用可能です)。親がタグをラップするのを止めるには、ルール<a>に追加white-space: nowrapし.topbarます。

.topbarの背景を常にコンテンツの後ろにも塗りつぶしたい場合は、widthプロパティをに変更する必要もありますmin-width。

修正なしで実際に動作している例を次に示しmin-widthます (私にとっては幅約 800px でオーバーフローします)。

コメントで述べたように、コンテンツがページよりも広い場合に余白が親の外側にはみ出さないようにするpadding: 0.1pxために、ルールに追加し.topbarます。これにより、表示に大きな影響を与えることなく、子マージンが親マージン内に (オーバーラップするのではなく) 留まります。

于 2012-05-20T18:20:05.937 に答える
1

次に、divに固定幅を与える必要があります。

メニューのピクセル数に置き換える代わりに、次のwidth: 100%;ようにします。 width: 700px;

.topBar {
    background-color:rgb(161,35,35);
    position:relative;
    display:inline-block;
    width: 700px;
    text-align:center;
    height:40px;
}
于 2012-05-20T18:22:18.960 に答える
1

オーバーフロー プロパティを使用できます。 http://www.w3schools.com/cssref/pr_pos_overflow.asp

お役に立てば幸いです。

于 2012-05-20T18:14:44.663 に答える
0

必要なのは、クラスに応じてwhite-spaceプロパティを設定することです。parent

.parent {
  min-width: 100%;
  white-space: nowrap;
}

実例を見ることができます。

于 2012-05-20T18:30:30.367 に答える