html - 将导航栏中的元素与图形水平对齐

Question

我用 twitter bootstrap 制作了一个 RoR 站点。我正在调整我的导航栏。它应该在中心有一个图像( Logo )，在它的左侧和右侧有列表项。我在中间有一个 Logo ，我有两个列表项，一个在 Logo 的左侧，一个在右侧。不幸的是，这两个列表项没有与我在中心的图形对齐。我猜这是我的选择器中的某些东西，我的所有列表项都遵循相同的规则。我想我必须为我的列表项(文本/链接)设置不同的规则，并为我的 Logo 设置不同的规则。这是我的 css 和 html:

html:

<section id="nav_holder" class="nav_default">
  <nav role="navigation">
    <ul class="navigation">
      <li class="prelogo"><%= link_to "Home", root_path %></li>
        <li id="logo" class="logo1"><%= link_to "About", about_path %></li>
    </ul>

CSS:

@import 'bootstrap';

.nav_default {
    background-color: #ff3600;
    width: 100%;
    height: 110px;
    position: fixed;
    z-index: 1;
    visibility: visible;
}

nav {
    z-index: 2;
    position: fixed;
    width: 980px;
    left: 45%;
    margin-left: -490px;
    padding-top: 10px;
}

.navigation {
    text-align: center;
    list-style: none;
}

.navigation li {
    list-style: none;
    height: 45px;
    display: inline-block;
    font-size: 1.4em;
    font-family: "futura-pt",sans-serif;
    font-weight: 700;
}

.prelogo {
padding-right: 96px;
}

.logo1 {
padding-left: 525px;
background: url('ctclogonewnobg.png') no-repeat left 1px;
}

.logo {

    margin-left: auto;
    margin-right: auto;
    width: 50em;

}

.masthead {
    background: url('CDRedBG.png');
    background-repeat: no-repeat;
    background-size:100% 100%;
    height: 600px;
}
body {
    padding-top: 40px;
    background: url('escheresque_@2X.png');
}

.container-center{
  width: auto;
  text-align: center;
}

@import 'bootstrap-responsive';

如何让我的 Logo 居中，同时让我的其他列表项水平对齐？现在它们都在我中心标志的上方，甚至重叠了一部分。

谢谢:)

Answer 1

首先，您是否尝试过对 .logo 和 .logo1 使用“float”变量？

例如

float:left

其次，尝试添加

position:relative

到 .logo 和 .logo1，因为这可能有助于结合 float 变量。

第三，.logo 下的边距条目可以用

缩短

margin:0 auto;

这将使内容居中。