css导航栏与图像

我想使用CSS做一个导航栏。导航链接需要与栏中间的图片保持均匀间隔。目前，它看起来像这样：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 &copy; 2016 Salon on Wheels, LLC. All rights reserved.</p> </div> 
 
    </body> 
 
</html>

来源

2016-03-19 jon doe

有什么实际问题？ –

这可能会有所帮助：http://stanhub.com/how-to-center-a-logo-in-unordered-list-navigation-using-css3-nth-child-selector/ – NormundsP

你可以改变你的HTML，插入img为li然后取出position:absolute从它，并与position值和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>

来源

2016-03-19 21:28:17 dippas

非常感谢。我是新来的CSS，所以当我尝试这种方法失败，因为我没有正确的CSS。 –

欢迎'：）' – dippas

如果你尝试添加第二和第三按钮之间有一些空间，我理解只给第二和第三李元素和给予保证金。或者，也许你可以添加2 ul元素和保证金之间

来源

2016-03-19 21:05:01 Ryuk

@joshua，它作为@ryuk说，以及如果我要这样做，gud的做法，如果我这样做，我只会做一个虚拟li之间第二和第三小孩然后适当保证金。 ü可以做到这一点，

<ul class="menulinks"> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li class="third"><a href="/work/">Products</a></li> <li><a href="/contact/">Contact</a></li> </ul>

.third{ margin-left: 10% }

或使第二和第三之间的虚拟li

 <ul class="menulinks"> 
     <li><a href="/">Home</a></li> 
     <li><a href="/about/">About</a></li> 
     <li class="dummy"></li> 
     <li><a href="/work/">Products</a></li> 
     <li><a href="/contact/">Contact</a></li> 
     </ul> 

.dummy{ 
    padding-left:10% 
}

来源

2016-03-19 21:12:09 rockStar

css导航栏与图像

回答

相关问题