1

「here!!!」というラベルの付いた場所に「float: left」を含めます。「a」要素のパディングを祖先の「ul」要素のパディングから独立させました。また、図 A (「float: left」を含める前) と図 B (後) に示すように、「a」要素間のスペースが消えました。

ここに画像の説明を入力

ここに画像の説明を入力

誰かがなぜこれが私に起こるのか説明できますか?

#top-menu {
    width: 470px;
    height: 200px;
    position: absolute;
    right: 0;
    border: solid;
}

#top-menu ul {
    width: 400px;
    float: left;
    padding: 20px;
    position: absolute;
    right: 0;
    bottom: 0;
    border: solid;
}

#top-menu li {
    display: inline;
    position: relative;
}

#top-menu li a {
    border: 1px solid transparent;
    border-radius: 4px 4px 4px 4px;
    color: #5A6770;
    float: left; /* <----- HERE!!! -----*/
    padding: 15px 20px;
    position: relative;
    text-decoration: none;
}

#top-menu li a:hover {
    background-color: #ECEFF2;
    border-color: #D1D6D9;
}

#top-menu li a:active {
    background-color: #E4E7EB;
    border-color: #BAC1C6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) inset;
}
4

1 に答える 1

2

これは、<a>要素がインライン要素であるためです。追加すると、ブロック要素float:leftのように機能し始めます。

「行」のみに影響するインライン要素にのみマージンとパディングを設定できます..つまり、左右です。しかし、たとえば、上下はできません。約 10 行の長い段落があるとします。そして、どこかにスパンまたは - インライン要素があります。上下のマージンとパディングを与えるロジックはありません。すべての段落が壊れてしまいますが、左右に追加することはできます。

ここで見つけることができる非常に良い説明。

于 2013-01-27T09:35:26.170 に答える