0

以下のナビゲーション メニューがあり、Ctrl キーを押しながら右クリックしてサイズを変更すると、最後の項目の FAQ が表示されて消えます。言うまでもなく、2 つの画像で表されるサイト全体の背景も壊れます。何が問題なのか、サイズ変更時に同じままにする方法は? 乾杯！

html:

<div class="nav">
        <ul>
           <li class='active '><a href='#'><span>Home</span></a></li>
           <li><a href='#'><span>about us</span></a></li>
           <li><a href='#'><span>our errand ladies</span></a></li>
           <li><a href='#'><span>schedule an errand</span></a></li>
           <li><a href='#'><span>contact us</span></a></li>
           <li><a href='#'><span>faq</span></a></li>
        </ul>
    </div>

CSS:

.nav {
            width: 100%;
            height: 63px;
            overflow: hidden;
        }

        .nav ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            width: auto;
            position: relative;
            display: block;
            height: 63px;
            text-transform: uppercase;
            font-size: 21px;
            background: transparent url('images/nav-bg-repeat.png') repeat-x top left;
            font-family: Helvetica,Arial,Verdana,sans-serif;
        }
        .nav li {
            display: block;
            float: left;
            margin: 0;
            padding: 0;
            }
        .nav li a {
            display: block;
            float: left;
            text-decoration: none; 
            padding:0 30px;
            height: 63px;
            line-height: 63px;
            vertical-align: middle;
            background: transparent url('images/divider.png') no-repeat top right;
            }
        .nav li a:hover {
            background: transparent url('images/nav-hover.png') repeat-x top right; 
            }

        .nav li a span {
            color: #000;
            font-weight: bold;
        }
4

2 に答える 2

0

要素にoverflow: hidden;設定しましたが、.nav幅が定義されていません。

デフォルトでは.nav、ブロック要素であるため、幅は 100% に設定されています。現在座っている親の幅に自動的に広がります。

ウィンドウのサイズを変更してリンクが収まらないサイズにすると、リンクは .nav の外に出て、ビューから隠されます。

.nav自分の(または親コンテナー) に固定幅を設定して、幅が崩れないようにすることができます。

.nav {
  width: 960px;
}

または、折りたたんでもナビゲーション リンクを表示したい場合は、要素を削除する overflow: hidden;と要素が表示されます (ただし、要素は互いにインライン化されません。

于 2013-05-22T19:00:00.683 に答える
0

2 番目の問題セットでは、

body{
background-repeat:no-repeat;
}

オーバーフローが隠されると消えます。なしに設定します

.nav{
width:1000px;
overflow:none;
..
}

私が見る方法は、リスト要素をインラインに配置しようとしているので、このコードを試して外観を変更できることです:

<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Here</a></li>
<li><a href="#">There</a></li>
<li><a href="#">Faq</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>


#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
于 2013-05-22T19:00:25.400 に答える