Question

我使用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';

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

谢谢：）

Answer 1

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

e.g。

float:left

其次，尝试添加

position:relative

到.logo和.logo1，因为这可能与float变量一起使用。

第三，.logo下的保证金条目可以缩短

margin:0 auto;

将以内容为中心。

使用图形水平对齐导航栏中的项目

1 个答案: