Question

如何简单地将所有这3个H3对齐在同一条线上，每个背后都有黑色背景，在悬停时变为灰色（每个后面的矩形）？感谢

CSS：

        #NavBar {
            text-align:center;
            vertical-align:middle;
        }

HTML：

<div id="Navbar">
                <h3 id="Tab-1" class="Active">Home</h3>
                <h3 id="Tab-2" class="Inactive">Alpha Keys</h3>
                <h3 id="Tab-3" class="Inactive">About</h3>
            </div>

Answer 1

将以下内容添加到您的CSS中，您将获得所需的结果：

#Navbar h3{
    display:inline-block; //this align them in one line
    background-color: black; //initial background color
    color:white; //text color
}
#Navbar h3:hover{
    background-color:gray; //hover background color
}

Answer 2

#NavBar h3 {
    display: inline;
    background: #000;
}

#NavBar h3:hover {
    background: #aaa;
}

Answer 3

所有标题标签H1，H2，H3，H4都是块级元素。这就是他们占据全宽的原因。因此，如果您需要将任何块级元素转换为内联元素，以便它们可以彼此相邻。您可以使用display:inline，或者您希望它们被视为block和inline元素使用display:inline-block。

在我喜欢的情况下，我说这些标记是块级元素，因此您可以使用display:inline-block将它们彼此相邻对齐..

#Navbar{color:#fff;text-align:center;vertical-align:middle;}
#Navbar h3{display:inline-block; background:#000; padding:5px;margin:5px;}
#Navbar h3:hover{display:inline-block; background:#333; cursor:pointer;}
#Navbar h3.Active{background:#333; text-decoration:underline;}

这是HTML结构。

<div id="Navbar">
<h3 id="Tab-1" class="Active">Home</h3>
<h3 id="Tab-2" class="Inactive">Alpha Keys</h3>
<h3 id="Tab-3" class="Inactive">About</h3>
</div>

以下是 Demo 。

将所有h3对齐在同一条线上并在悬停时改变颜色？

3 个答案: