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導航欄與圖像

回答

相關問題