0

TwitterのブートストラップでRoRサイトを作りました。ナビゲーション バーを調整しています。中央に画像（ロゴ）があり、その左右にリスト項目があるはずです。中央にロゴがあり、ロゴの左側に 1 つ、右側に 1 つの 2 つのリスト項目があります。残念ながら、2 つのリスト項目が中央の私のグラフィックと整列していません。それはセレクター内の何かであり、すべてのリスト項目が同じルールに従っていると推測しています。テキスト/リンクであるリスト項目とロゴの異なるルールに異なるルールを設定する必要があると思います。ここに私の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 に変更すると、float 変数と組み合わせると役立つ場合があります。

第三に、.logo の下の余白エントリは次のように短縮できます。

margin:0 auto;

これにより、コンテンツが中央に配置されます。

于 2013-06-27T03:22:04.303 に答える