如何在兩個菜單列表中間放置一個徽標？

我試圖把兩個菜單列表之間的標誌，但它不工作。我事先做了一個PSD，這就是它應該是這樣的：如何在兩個菜單列表中間放置一個徽標？

enter image description here

不過，我只是不能在HTML和CSS出於某種原因做到這一點。下面是它看起來像現在：

enter image description here

我應該怎麼做呢？它只是因爲某種原因不會工作。

我的HTML：

<body> 
    <div class="nav"> 
     <div class="container"> 
      <div class="menu-left"> 
       <ul> 
        <li><a id="hello" href="#">Home</a></li> 
        <li><a id="about" href="#">About</a></li> 
       </ul> 
      </div> 
      <div class="logo"></div> 
      <div class="menu-right"> 
       <ul> 
        <li><a id="portfolio" href="#">Portfolio</a></li> 
        <li><a id="contact" href="#">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</body>

我的CSS：

div { 
    display: block; 
} 

.nav { 
    height: 64px; 
    background: url(navigation_bg.png); 
    width: 100%; 
    margin:0 auto; 
} 

.container { 
    width: 960px; 
    position: relative; 
    margin:0 auto; 
} 

.menu-left, .menu-right { 
    width: 300px; 
    height: 64px; 
    position: absolute; 
    top: 0; 
} 

.menu-left { 
    left: 200px; 
} 

.menu-right { 
    right: 200px; 
} 

.nav ul { 
    list-style:none; 
    margin: 0; 
    padding: 0; 
    height: 64px; 
    line-height: 64px; 
} 

.nav ul li { 
    float: left; 
    font-family: 'FuturaStdBoldCondensed'; 
    font-size: 20px; 
    text-shadow: 1px 1px 1px black; 
    text-transform: uppercase; 
    margin:0 20px; 
} 

.menu-right ul li { 
    float: right; 
} 

.logo { 
    margin: 0 auto; 
    width: 140px; 
    height: 128px; 
    background: url(logo.png) center center rgba(0,0,0, 0.4); 
    border-radius: 0 0 20px 20px; 
}

我如何得到這個完全居中？

來源

2012-01-27 Qasim

只需插入標誌爲列表項，一類/ ID添加到列表項和樣式列表你不需要兩個無序列表 – Scott 2012-01-27 02:22:38

此外，你的標誌的寬度是128px，你在CSS中指定140px。 – Virendra 2012-01-27 02:24:01

@Scott這可以工作，但我該如何居中？如果我拿走'float：left '並替換爲'display：inline'，這個標識不會顯示 – Qasim 2012-01-27 02:26:00

我不會將菜單分成兩部分。將它製成一個整體，然後將其中一箇中間LI設置爲班級，讓其表示hspace並將padding-left（或右）應用於該班級。然後絕對位置你的標誌。
要在LI中完美地居中文本，只需將text-align: center;應用於它。

來源

2012-01-27 02:26:35 Marakoss

我怎樣才能完美地將UL本身放在中心位置？我不能在每個LI上使用'display：inline'，因爲這樣logo就不會顯示。 – Qasim 2012-01-27 02:29:33

有'display：inline-block;'屬性，它可能會完成這項工作。但是我建議使用上面描述的程序。看看我前一段時間在這裏寫的網站：[鏈接]（http://www.restauracemichalov.cz/）。它使用相同的技術。 – Marakoss 2012-01-27 02:34:46

http://jsfiddle.net/L2VrN/

我有兩個菜單之間居中標誌。

要做到這一點，我把徽標周圍的另一個DIV與left:50%，然後在徽標左側的負值，以彌補它的寬度。

您可能必須使用左右值來查看菜單和徽標，才能將定位完全放到您想要的位置。

來源

2012-01-27 12:19:20 Matthew

這是如何中心的UL ...

刪除「保證金：0汽車」，從「導航」，沒有必要爲它的寬度是100％，要居中的UL認證。

合適的寬度設置爲「UL」他們使用「保證金：0汽車」就可以了

來源

2012-01-27 12:21:33 Erick

如何在兩個菜單列表中間放置一個徽標？

回答

相關問題