0

私はhttp://www.inboundio.comを構築していますが、私のローカルホストとサーバーではサイトは問題ないように見えますが、ブラウザショットと批評で特定のスクリーンショットを撮り、これをウェブサイトのスクリーンショットhttp://i.imgur.com/として示しましたtPUgiU9.png (上部に、私たちが画像の一部であることに注意してください)

なぜこれが起こっているのかわかりません。ページは応答性が高く、ローカルホストとサーバーではすべて問題ないようです。私が見ることができるいくつかのcssの問題が確かにあるので、これを修正する方法について考えてください。

メニューコード

<div class="top-menu pull-right  home-menu" id="main-menu">
  <ul class="nav">
    <!-- li><a href="#features">Features</a></li -->
    <li><a href="/features">Features</a></li>
    <li><a href="/plans">Pricing</a></li>
    <li><a href="/demo">Demo</a></li>
    <li><a href="/about">About Us</a></li>
  </ul>
</div>

CSS

body.frontend .header .top-menu {
margin-top: 5px;
padding: 5px 10px;
position: absolute;
left: 50%;
margin-left: 140px;
}

.nav {
margin-left: 0;
margin-bottom: 20px;
list-style: none;
}

.pull-right {
float: right;
}
4

2 に答える 2

1

これを試してデバッグすると、この問題が見つかりました

このフィドルを参照してください

あなたの代わりにこのコードを使用してください 

<ul class="nav">
    <li><a href="/features">Features</a></li>
    <li><a href="/plans">Pricing</a></li>
    <li><a href="/demo">Demo</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a class="btn btn-success pull-right login-btn" href="/users/sign_in">Sign-in</a></li>
</ul>

このcssをスタイルに追加すると、正常に機能します

.frontend .nav li a.btn{margin-top:0!important;}
.frontend .nav li{line-height: 30px!important;}
于 2013-06-21T04:22:20.487 に答える
1

サインイン ボタンをリストに移動したくない場合は、div の右側にパディングを追加してみてください。ボタンの幅に少し余分を加えて使用します。

body.frontend .header .top-menu {
    left: 50%;
    margin-left: 140px;
    margin-top: 5px;
    padding-bottom: 5px;
    padding-right: 60px;
    padding-top: 5px;
    position: absolute;
}
于 2013-06-21T05:18:22.973 に答える