最佳答案
对于要点,它是 list-style
不是 list-style-type
需要设置为 none
对于横线,先设置<ul>
至 display: flex;
所以它会穿过水平屏幕。然后让<li>
元素是 display: inline-block
在那个空间里。
这是一个 jsfiddle,包含这些更改和一些额外的更改以使其看起来更好: https://jsfiddle.net/p9mL2tnd/1/
代码如下:
html:
<div id="nav">
<h3>Page Navigation</h3>
<ul>
<li><a href="index.html">Welcome</a></li>
<li><a href="about.html">About</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Gallery.html">Gallery</a>
<li><a target="_blank" href="https://www.facebook.com">Facebook</a></li>
</ul>
</div>
CSS:
a:link {
color: #fff;
}
a:visited {
color: #fff;
}
a:active {
color: #fff;
}
a:hover {
color: #fc0;
background-color: #006a9d;
}
a:focus {
color: #fc0;
}
div#nav {
margin: 0;
padding: 0;
display: block;
}
h3 {
background-color: beige;
display: block;
text-align: center;
margin: 0;
padding: 0;
}
ul {
display: flex;
margin: 0;
padding: 0;
}
li {
list-style: none;
background-color: #0080c0;
display: inline-block;
text-decoration: none;
width: 150px;
padding: 5px 20px;
font-family: 'Arial', 'sans-serif';
font-weight: 14px;
border-bottom: 1px #ccc solid;
}
关于html - 列表样式类型和显示 :inline-block question,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52682962/