0

HTML のナビゲーション バーとしてインラインの順序付けられていないリストがあります。li 要素にカーソルを合わせたときに上部の境界線が表示されるようにしました。しかし、連続する要素間にスペースを空けるためにマージンまたはパディングを追加すると、境界線が広すぎます。HTMLにスペースを追加したくありません。他に方法はありますか？幅が定義された空の div を配置しようとしましたが、うまくいきませんでした。私が得ることができる最良の結果は、テキスト装飾のオーバーラインでしたが、残念ながら黒とは異なる色が必要です. これが私のコードです：

LI
{
display: inline;
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.2em;
padding-left: 30px;
}
LI:hover
{
border-top: 1px solid #000000;
}

と HTML

<ul>
            <a href="#"><li>link 1</li></a>
            <a href="#"><li>link 2</li></a>
            <a href="#"><li>link 3</li></a>
            <a href="#"><li>link 4</li></a>
</ul>
4

2 に答える 2

1

パディングは要素の幅を拡張し、マージンは要素の前後に空のスペースを作成します。Box Modelについてもっと読みたいと思うかもしれません。

あなたのケースに合わせてコードを調整しました：

HTML:

<ul>
    <a href="#"><li>link 1</li></a>
    <a href="#"><li>link 2</li></a>
    <a href="#"><li>link 3</li></a>
    <a href="#"><li>link 4</li></a>
</ul>

CSS:

ul a {
    text-decoration: none !important; //Removes default underline form link
}

li {
    display: inline;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding-left: 0.2em; // Letter spacing is making borders to extend slightly more on the right. This makes borders extend similarly on the left
    padding-top: 2px; //To push top border slightly higher, so that top and bottom is the same distance from your text
    margin-left: 30px;
    text-align: center;
    border-top: 1px solid transparent; //Stops navigation from extending on :hover
}

li:hover {
    border-top: 1px solid #000; //border top on :hover
}

FiddleJS: http://jsfiddle.net/kGN69/2/

于 2013-06-26T22:51:54.683 に答える