0

div 間に余分なスペースを入れる理由がわからない

http://jsfiddle.net/3cx8w/1/

それは地獄のように簡単です：

HTML:

<div id='menu'>
  <div id='menu-homepage'><a href='/?category=homepage'>Homepage</a></div>
  <div id='menu-prices'><a href='/?category=prices'>Prices</a></div>
  <div id='menu-contacts'><a href='/?category=contacts'>Contacts</a></div>
</div>

CSS:

#menu {
    position: absolute;
    top: 16%;
    left: 5%;
    width: 90%;
    background-color: #343434;
    border: 1px solid black;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#menu div {
    display: inline-block;
    height: 100%;
    padding: 1% 2%;
    margin: 0;
    border-left: 1px dotted gray;
    border-right: 1px dotted gray;
    font-size: 60%;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

#menu a {
    color: white;
    text-decoration: none;
}

助けてください。

4

1 に答える 1

1

ボタンdivにスタイルを与える

float:left;

それ以外の

display:inline-block;

そして、このdivを#menuの最後に追加します

<div style="clear:both"></div>
于 2012-11-08T22:43:34.313 に答える