0

そこで、メディア クエリに合わせてスケーリングするレスポンシブ ナビゲーション メニューを構築しようとしています。

問題は (そして、それは私が解決できないばかげた問題です)、a タグをブロックレベルの要素として表示できないことです (私はそう思います)。

HTMLは次のとおりです。

<div class="navbuttons">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Expertise</a></li>
        <li><a href="#">Capabilities</a></li>
        <li><a href="#">Case Studies</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
 </div> <!-- end div navbuttons -->

そしてCSS：

.navbuttons {
    position: relative;
    height: 100px;
    width: 50%;
    background-color: blue;
    float: left;
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

.navbuttons ul {
    list-style: none;
    margin:0;
    padding:0;
    float: left;
}

.navbuttons li {
    float:left;
}

.navbuttons li a {
    background: #444;
    display: block;
    float: left;
    line-height: 100px;
    height: 100%;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 16.5%;
}

それでも、幅/高さを定義するために px を使用すると、大まかに希望どおりに表示できます (ただし、必要なように流動的ではないことは明らかです)。

.navbuttons {
    position: relative;
    height: 100px;
    width: 50%;
    background-color: blue;
    float: left;
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

.navbuttons ul {
    list-style: none;
    margin:0;
    padding:0;
    float: left;
}

.navbuttons li {
    float:left;
}

.navbuttons li a {
    background: #444;
    display: block;
    float: left;
    line-height: 100px;
    height: 100px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100px;
}

どこが間違っていますか？

4

1 に答える 1

2

A タグは実際に指定するとブロック レベルになりますがdisplay: block;、16.5% は自然な幅 (つまり、内側のテキストに基づく 100% の幅) から計算されます。

必要に応じて、幅パラメーターを削除し、単にパディングを追加することができます。http://jsfiddle.net/bLS6B/を参照してください。このように、幅はあらかじめ設定された幅ではなく、ナビゲーション テキストに依存します。または、同様の効果を持つ 120% を指定することもできます。

于 2012-07-06T21:15:05.983 に答える