0

次のような CSS で、下の境界線を持つリンクがあります。

a {
    display: block;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 30px;
    border-bottom: 1px solid #EEE;
}

「パディング」値が幅の値に追加され、境界線の下部が長すぎるため、問題があります。

http://screenshooter.net/9186066/advygxa

何か考えはありますか？

4

4 に答える 4

3

パディングと幅は共存するのに苦労します。幅の宣言を削除するだけです。アンカーはブロックであるため、自動的に 100% の幅 (パディングを含む) を使用します。

a {
    display: block;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 30px;
    border-bottom: 1px solid #EEE;
}

これで、幅が 100% になるはずです。

于 2012-10-29T13:01:18.517 に答える
0

正常に動作しています。http：//jsfiddle.net/GjMQe/を確認してください。 

a {
display: block;
width: 100%;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
border-bottom: 1px solid #EEE;

} </ p>

テンプレートにreset.cssファイルを含めるのを忘れた可能性があります。

Normalize.cssを確認してください

于 2012-10-29T13:08:07.187 に答える
0

リンクを含む div にこれを追加します。

overflow-x:hidden;

デモ: http://jsfiddle.net/calder12/zXmG3/

于 2012-10-29T13:05:23.023 に答える
0

それがパディングです。レイアウト モデルがどのように機能するかを見てください。それに応じて調整してください。柔軟なソリューションを探している場合は、要素からパディングを削除し、適切なマージンを持つa内部のようなものを追加し、それに応じて他のダイヤルを調整する必要があります。spana

于 2012-10-29T13:00:01.423 に答える