Question

所以我制作了一个导航栏，但我唯一的问题是将内容集中在导航栏中，同时保持水平。因此，不是从左侧开始的上下文，它保持在中心。

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

li {
float: left;
text-align: center;
}

li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Ariel, sans-serif;
font-size: medium;
font-weight:bold;
letter-spacing: 1px;
}

li a:hover {
background-color: #111;
}

任何帮助都会很棒！谢谢！

Answer 1

而不是浮动列表元素（浮动元素永远不能在其父元素中居中），您必须为它们使用display: inline-block;，然后只需将ul居中：

ul {
    text-align: center;
}

li {
    display: inline-block;
}

整个代码将是：

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F8F8F8;
text-align: center;
}

li {
display: inline-block;
}

li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Ariel, sans-serif;
font-size: medium;
font-weight:bold;
letter-spacing: 1px;
}

li a:hover {
background-color: #111;
}

演示：JSFiddle

将内容居中放在水平导航栏中（包括突出显示）

1 个答案: