如何在两个菜单列表中间放置一个徽标？

我试图把两个菜单列表之间的标志，但它不工作。我事先做了一个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

如何在两个菜单列表中间放置一个徽标？

回答

相关问题