Question

所以我正在使用这个CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1f1f2d;
}

li {
    float: left;
}

li a {
    font-family: "Copperplate Gothic Bold", Brown, Campton, Arial, Helvetica, Sans-serif;
    font-size: 1.2em;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 145px;
    text-decoration: none;
}

li a:hover {
    background-color: #f2f2f2;
    color: #1f1f2d;
}

在HTML

中制作这些按钮

<ul>
        <li><a href="">Home</a></li>
        <li><a href="">page 1</a></li>
        <li><a href="">page 2</a></li>
        <li><a href="">page 3</a></li>
</ul>

https://jsfiddle.net/j5utbcqn/

如何保持不同颜色的背景和悬停色差，同时使工具栏适合水平，只占用页面上的一些垂直空间？我想确保元素保持水平线，同时在不同的分辨率设置下填充整个页面。

Answer 1

＆＃13;

div {
    text-align: center;
}

ul {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1f1f2d;
}

li {
    display: inline-block;
}

li a {
    font-family: "Copperplate Gothic Bold", Brown, Campton, Arial, Helvetica, Sans-serif;
    font-size: 1.2em;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 15px 14px 15px;
    text-decoration: none;
}

li a:hover {
    background-color: #f2f2f2;
    color: #1f1f2d;
}

＆＃13;

<div>
<ul>
        <li><a href="">Home</a></li>
        <li><a href="">page 1</a></li>
        <li><a href="">page 2</a></li>
        <li><a href="">page 3</a></li>
</ul>
</div>

＆＃13;

Answer 2

    <nav>
<ul>
        <li><a href="">Home</a></li>
        <li><a href="">page 1</a></li>
        <li><a href="">page 2</a></li>
        <li><a href="">page 3</a></li>
</ul>
</nav>

CSS：

nav {width: 100%;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1f1f2d;

}

li {
    float: left;
    width: 25%;
}

li a {
    font-family: "Copperplate Gothic Bold", Brown, Campton, Arial, Helvetica, Sans-serif;
    font-size: 1.2em;
    display: block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

li a:hover {
    background-color: #f2f2f2;
  color: #1f1f2d;}

如何在保持格式化的同时将li与li居中

2 个答案: