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是一個很好的工具。