对于子弹点,需要设置为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;
}
a:link { color: #fff;}
a:visited { color: #fff;}
a:hover { color: #fff;}
a:active { color: #fc0; background: 006a9d;}
a:focus { color: #fc0;}
#nav h3 {
margin: 0;
}
h3 {
text-align: center;
color: #71e62a;
font-size: 24px;
font-weight: bold;
border-bottom: 1px solid #48e0e6;
padding-bottom: 15px;
}
ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
background: #0080c0;
}
ul li a {
background-color: #0080c0;
display: inline-block;
text-decoration: none;
width: 150px;
padding: 5px 20px;
margin: 8px 0;
font-weight: bold;
font-size: 18px;
font-family: Arial,"sans serif";
}
<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>
<li><a target="_blank" href="http://www.facebook.com">Facebook Page</a></li>
</ul>
</div>