0

これには簡単な修正があるかもしれませんが、私を悩ませました...

Headerとある商品もNavBarございます。<a>

問題 ：

私が使用している場合は正常に動作しますが、代わりにpadding: 20pxパーセンテージ%パディングを使用すると、結果は本来あるべきもののようには見えません。padding: 10%px

下を見るとよくわかります。

前もって感謝します。

JsFiddle のデモ。

HTML

<div id="Header">
 <div id="NavBar">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contant</a></li>
        <li><a href="#">About us</a></li>
    </ul>
 </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
#Header {
    position: relative;
    width: 100%;
    height: 100px;
    background-color: #ccc;
}
#NavBar ul { list-style-type: none;}
#NavBar ul li { float: left; }
#NavBar ul li a {
    padding: 50px; /* It works fine */
    padding: 15%; /* The problem is here */
    background-color: #12aeef;
}
4

6 に答える 6

5

リスト アイテムには、% を計算するためのディメンションが必要です。これを試して：

#NavBar ul li a {
padding: 15%; 
display:inline-block;
height: 100%;
width: 80px;
background-color: #12aeef;
}

更新されたフィドル: http://jsfiddle.net/YhX2r/10/

于 2013-07-04T19:55:19.020 に答える
2

http://jsfiddle.net/YhX2r/7/

display: inline-block;
padding: 0 15%;

すべての表示オプションの詳しい説明については、https://developer.mozilla.org/en-US/docs/Web/CSS/displayを参照してください

于 2013-07-04T19:54:01.950 に答える
2

「a」ではなく「li」に幅を適用する必要があります

#NavBar ul li { 
float: left; 
width: 15%;
background-color: #12aeef;
}
于 2013-07-04T19:55:04.063 に答える
2
于 2013-07-04T19:56:47.683 に答える
1

<a>要素はdisplay: inlineデフォルトであり、パーセンテージを扱うことはできません。CSS で
使用してみてください。デザインが壊れない可能性があります (ただし、間違っている可能性があります)。display: inline-block

于 2013-07-04T19:54:41.293 に答える