我只是没有做对。如何将{em>列出项目置于ul
?
body {margin: 0}
ul {
width: 1000px;
margin: 0 auto;
padding: 0;
list-style-type: none;
margin-top: 30px;
overflow: hidden;
background-color: #333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ul li {
display: inline;
}
li a {
display: inline-block;
padding: 8px 11px;
margin-right: 10px;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 18px;
line-height: 50px;
}
li a:hover {
background-color: #111;
}

<ul>
<li><a href="#">Home</a><li>
<li><a href="#">Over mij</a><li>
<li><a href="#">PO's</a><li>
<li><a href="#">Contact</a><li>
</ul>
&#13;
答案 0 :(得分:0)
您可以使用 Flexbox 执行此操作:
body {margin: 0}
ul {
margin: 0 auto;
padding: 0;
list-style-type: none;
margin-top: 30px;
overflow: hidden;
background-color: #333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: flex; /* displays flex-items (children) inline */
justify-content: center; /* centers them horizontally */
}
ul li {
display: inline;
}
li a {
display: inline-block;
padding: 8px 11px;
margin-right: 10px;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 18px;
line-height: 50px;
}
li a:hover {
background-color: #111;
}
&#13;
<ul>
<li><a href="#">Home</a><li>
<li><a href="#">Over mij</a><li>
<li><a href="#">PO's</a><li>
<li><a href="#">Contact</a><li>
</ul>
&#13;
答案 1 :(得分:0)
您只需添加
即可 text-align:center;
在ul造型中。你会实现的。
ul {
margin: 0 auto;
padding: 0;
list-style-type: none;
margin-top: 30px;
overflow: hidden;
text-align:center;
background-color: #333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: flex; /* added */
justify-content: center; /* added */
}
然后根据需要使用边距右边的锚点。
答案 2 :(得分:0)
只需将text-align:center
添加到ul
ul {
width: 1000px;
margin: 0 auto;
padding: 0;
list-style-type: none;
margin-top: 30px;
text-align: center;
overflow: hidden;
background-color: #333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ul li {
display: inline;
}
li a {
display: inline-block;
padding: 8px 11px;
margin-right: 10px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
font-size: 18px;
line-height: 50px;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Over mij</a></li>
<li><a href="#">PO's</a></li>
<li><a href="#">Contact</a></li>
</ul>