Question

我正在构建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;
}

Answer 1

尝试这个调试它，我发现了这个问题

请参阅此fiddle

使用此代码代替

<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;}

Answer 2

如果您不想将登录按钮移到列表中，请尝试在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;
}

菜单未与图像/链接对齐（CSS问题）

2 个答案: