CSS导航菜单

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

你去 。 我修复了所有内容，使其变得漂亮，就像您描述的一样。 新的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样板和引导程序？ 我了解在开发响应式网站方面，这两者很常见。 你们如何看待这两种产品？ 我想我在Dreamweaver CS3中仍旧工作。 自2009年以来，我还没有创建网站，而且我知道自那时以来，技术（移动和平板电脑）已经发生了变化。 话虽如此，我只需要一些关于如何将其整合到我的网站以及使用程序来减轻跨浏览器兼容性的指示。 我听说过modernizr是一个很好的工具。