CSS 导航菜单答案

【问题标题】：CSS Navigation MenuCSS 导航菜单
【发布时间】：2014-06-22 14:26:37
【问题描述】：

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

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

【问题讨论】：

您的 html 无效。重新排列你的标签
你的 html 是有效的，除了你最后一个 li 中有一个额外的，但是你的 CSS 不好..应该是 .twitter a (not li).. etc..

标签： html css

【解决方案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。

【讨论】：

干得好，先生！打的好。现在我想在菜单中添加社交媒体图标而不是文字（facebook、twitter 等）。通过添加图像，在此菜单中移动其他元素是否会产生负面影响？
我建议使用Font Awesome。它是免费的，易于使用，图标就像文本一样，非常适合。

【解决方案2】：

将此添加到您的 CSS：

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

【讨论】：

【解决方案3】：

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

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

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

见http://jsfiddle.net/dj2da/

（还通过删除 Linkedin 链接中的第一个关闭 </li> 标记来修复您的 html）

【讨论】：

【解决方案4】：

HTML5 样板和引导程序？我知道这两个在开发响应式网站方面很常见。大家觉得这两款产品怎么样？我想我更老派仍在使用 Dreamweaver CS3。自 2009 年以来，我没有创建过网站，而且我知道从那时起，随着技术（手机和平板电脑）的发展，情况发生了变化。话虽如此，我只需要一些关于如何将其合并到我的网站以及使用程序来减轻跨浏览器兼容性的指示。我听说modernizr 是一个很好用的工具。

【讨论】：