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 回答