所以我使用这个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/
如何保持不同颜色的背景和悬停颜色的差异，同时使工具栏适合水平方向，只占用页面上的一点垂直空间？我想确保元素保持在水平线上，同时以不同的分辨率设置填充整个页面。
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;
}<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> <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;}