我正在尝试使用CSS制作导航栏。导航链接需要与条中间的图片均匀间隔。目前看起来像这样:
编码:
body {
background-image: url("../img/bg.jpg");
margin-left: 0px;
margin-right: 0px;
}
div.menucontainer {
margin-top: 50px;
background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
height: 35px;
box-shadow: 0px 5px 10px #000;
text-align: center;
}
IMG.vcmenulogo {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 10px;
}
.menulinks {
position: relative;
right: 0px;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.menulinks li {
display:inline;
}
.menulinks a {
display:inline-block;
padding:10px;
}
#footer {
position: fixed;
background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
box-shadow: 0px -6px 5px 0px rgba(0,0,0,0.75);
width:100%;
height:20;
bottom:0;
}
P.footer {
text-align: center;
color: white;
font-size: 11px;
font-family: Arial;
}
<!DOCTYPE html>
<html>
<head>
<title>The Vincent Collection: Luxury in Haircare</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="menucontainer">
<img class="vcmenulogo" src="http://www.thevincentcollection.com/img/vc-logo-menu.png" />
<ul class="menulinks">
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/work/">Products</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
<div id="footer"> <p class="footer">Copyright © 2016 Salon on Wheels, LLC. All rights reserved.</p> </div>
</body>
</html>
您可以更改HTML,插入img
as li
,然后position:absolute
从中删除as ,并进行其他一些关于position
value和的调整vertical-align
,您将拥有所需的内容。
body {
background-image: url("../img/bg.jpg");
margin: 0
}
.menucontainer {
margin-top: 50px;
background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
height: 35px;
box-shadow: 0px 5px 10px #000;
text-align: center;
}
.menulinks {
position: relative;
top: -90px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.menulinks li {
display: inline-block;
padding: 10px;
vertical-align: middle
}
<div class="menucontainer">
<ul class="menulinks">
<li><a href="/">Home</a>
</li>
<li><a href="/about/">About</a>
</li>
<li>
<img class="vcmenulogo" src="http://www.thevincentcollection.com/img/vc-logo-menu.png" />
</li>
<li><a href="/work/">Products</a>
</li>
<li><a href="/contact/">Contact</a>
</li>
</ul>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句