Question

如何在导航中的同一行显示徽标，菜单项和社交媒体图标？我喜欢左侧有徽标，中间有菜单项，右侧有社交媒体图标，如果有意义的话。

HTML：

<div class="nav">
    <div id="nav-wrapper">
      <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="service.html">Service</a></li>
          <li><a href="contact.html">Contact</a></li>
      </ul>
      <ul class="social">
          <li class="facebook"><a href="https://www.facebook.com/jason.murray.3975012"</a>Facebook</li>
          <li class="twitter"><a href="https://twitter.com/jmurray504"</a>Twitter</li>
          <li class="linkedin"></li><a href="http://http://www.linkedin.com/pub/jason-murray/42/249/440/"</a>Linkedin</li>
      </ul>
    </div>
</div>   


CSS

.social {
list-style-type: none;
padding: 0;
margin: 0;
}

.facebook li {
        background: url(Image/facebook.png);
        height: 20px;
        width: 18px;
}

.twitter li {
        background: url(Image/twitter.png);
        height: 20px;
        width: 18px;
}

.linkedin li {
        background: url(Image/linkedin.png);
        height: 20px;
        width: 18px;
}

Answer 1

There you go。我修复了一切，使它漂亮，就像你描述的那样。新的CSS：

nav {
    text-align: center;
    background-color: #008cff;
    font-family: arial;
}
.nav-wrapper a {
    color: white;
    text-decoration: none;
    padding: 15px;
}
nav a:hover {
     background: #47ACFF;
}
.nav-wrapper {
     padding: 0 20px 0 20px;
}
nav ul, nav ul li {
     display: inline-block;
}
.logo {
    float: left;
}
.social {
    float: right;
}

唯一的问题是它不适合小屏幕（手机，平板电脑等），所以我建议使用Bootstrap。

Answer 2

让元素在线显示的最佳方法是添加“display：inline”，或者在这种情况下我会选择“display：inline-block”

此示例的简单解决方案是：

.nav ul, .nav li { display:inline-block; }

请参阅http://jsfiddle.net/dj2da/

（还通过删除Linkedin链接中的第一个结束</li>标签来修复你的html）

Answer 3

将此添加到您的css：

.nav li, .nav a {
    display: block;
    float: left;
}

Answer 4

HTML5 Boilerplate和Bootstrap？我知道这两个在开发响应式网站方面很常见。你们对使用这两种产品有何看法？我想我还有更老的学校还在使用Dreamweaver CS3。我自2009年以来就没有创建网站，我知道自那时以来技术（移动和平板电脑）已经发生了变化。话虽如此，我只需要了解如何将其合并到我的网站以及使用程序来减轻跨浏览器兼容性的一些指示。我听说过modernizr是一个很好用的工具。

CSS导航菜单

4 个答案: