0

我用 twitter bootstrap 创建了一个 RoR 网站。我正在调整我的导航栏。它应该在中心有一个图像（徽标），其左侧和右侧有列表项。我在中心有徽标，我有两个列表项，一个在徽标的左侧，一个在右侧。不幸的是，这两个列表项与我在中心的图形不对齐。我猜这是我的选择器中的东西，我所有的列表项都遵循相同的规则。我想我必须为我的列表项（文本/链接）设置不同的规则，并为我的徽标设置不同的规则。这是我的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';

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

谢谢 ：）

4

1 回答 1

0

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

例如

float:left

其次，尝试添加

position:relative

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

第三，.logo 下的边距条目可以缩短为

margin:0 auto;

这将使内容居中。

于 2013-06-27T03:22:04.303 回答