Question

特别是我在按钮内的文字有问题。每当我尝试在按钮的顶部或底部应用填充以使文本居中时，它所做的就是移动整个按钮。我怀疑这与我对定位和显示缺乏理解有很大关系。

<!DOCTYPE html>
<html>
<head>
    <title>WhiteGrid</title>
    <link type="text.css" rel="stylesheet" href= "stylesheet.css"/>
</head>
<body>
    <div>
        <div id="header"><img src="title.png"></div>
        <div id="navbar">
            <div class="button"><p>Home</p></div>
            <div class="button"><p>Gallery</p></div>
            <div class="button"><p>About</p></div>
            <div class="button"><p>Settings</p></div>

        </div>
        <div id="body"></div>
        <div id="footer"><p>Copyright&copy 2015 Hayden Shaw. All rights reserved.</p></div>
    </div>
</body>
</html>

CSS：

body {
    background-color: #C6C1C9;
}

#header {
    display: block;
    background-color: #856799;
    height: 60px;
    width: 100%;
    box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#header > img {
    display: block;
    margin: auto;
}

#navbar {
    display: block;
    background-color: rgba(73,71,74,0.7);
    height: 40px;
    width: 100%;
    box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#body {
    display: block;
    width: 100%;
    min-height:500px;
}
#footer {
    padding-top:24px;
    display: block;
    background-color: #7D7285;
    width: 100%;
    height: 60px;
    box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#footer > p {
    position: relative;
    text-shadow: 0px -1px rgba(0,0,0,0.2);
    color: #A3A3A3;
    font-family: Verdana;
    font-size: 10px;
    text-align: center;

}
.button{
    margin:0px;
    text-shadow: 0px -1px rgba(0,0,0,0.2);
    font-family: Verdana;
    text-align: center;
    color: white;
    display: inline-block;
    height: 40px;
    width: 80px;
    background-color: rgba(73,71,74,0);
}
.button:hover{
    background-color: #353336;
    color: #856799;
}

提前致谢。

Answer 1

不要在按钮上应用填充，而是在文本中使用段落。如果您在编写文本时遇到问题，我建议使用更容易的文本图像。

您似乎正在尝试创建菜单栏。我不会使用div来做。使用表格或列表要容易得多。

<table>
        <tr>
    <td>Home</td>
    </tr>
        </table>

    <ul>
    <li>Home</li>
</ul>

风格会更容易。

Answer 2

没有必要为此定位。由于多种原因，您也不应该使用div来创建按钮。

您可以做的最好的事情是使用<button />元素，或使用anchor tag代替：

HTML：

<a href="#" class="paddedButton khaki noUnderline">Button</a>

CSS：

.paddedButton
{
    padding: 10px;
}

.khaki
{
    background-color: khaki;
}

.noUnderline
{
    text-decoration: none;
}

.noUnderline:hover
{
    text-decoration: underline;
}

HTML5在元素

2 个答案: