Question

不确定为什么我的div之间会有额外的空间

地狱很简单：

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;
}

请帮忙。

Answer 1

给按钮划分样式

float:left;

而不是

display:inline-block;

并将此div添加到#menu

的末尾

<div style="clear:both"></div>

div之间的额外空间，另一个

1 个答案: