將邊距單獨添加到內嵌塊元素

Question

我想在無序列表中的元素之前應用一定量的空間。這是網址：http://hottdoggfilms.com。我嘗試將狗的圖片與徽標集中在其他列表元素之間。但是「最近的工作」和「關於我們」的元素之間存在不均衡的空間。我的標記是：

<div id="navbar" class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
      <h1><a class="brand" id="cf" href="#"><img class="bottom" src="hottdogg.png" data-min-width-481="hottdogg.png" alt="Tipit"><img class="top" src="hottdogg.png" data-min-width-481="hottdoggHover.png" alt="Tipit"></a></h1> 
      <nav class="nav-collapse collapse" role="navigation"> 
       <h2 class="visuallyhidden">Navigation</h2> 
       <ul class="nav"> 
        <li class="active"><a href="#home">Home</a></li> 
        <li><a href="#recent-work">Recent work</a></li> 
        <li class="divider"></li> 
        <li style="margin-left:20px"><a href="#about-us">About us</a></li> 
        <li><a href="#contact-us">Contact us</a></li> 
       </ul> 
      </nav> 
     </div> 
    </div> 
</div> 

而CSS：

#navbar .nav { 
    font-size: 0; 
    text-align: center; 
    white-space: nowrap; 
    float: none; 
    margin: 0; 
} 
#navbar .nav li { 
    display: inline-block; 
    float: none; 
} 
#navbar .nav a { 
    margin-bottom: 0; 
    font-size: 16px; 
    line-height: 37px; 
    height: 37px; 
    padding-left: 1.4em; 
    padding-right: 1.4em; 
} 
#navbar .divider { 
    width: 186px; 
} 

Answer 1

對我來說，導航是相當混亂的，該分壓器和所有。 爲什麼不去更簡單的解決方案？ http://codepen.io/anon/pen/IeLCf

nav { 
    margin:0 auto; 
    border:1px dashed black; 
    text-align:center; 
} 
nav a { 
    position:relative; 
    top:-100px; 
    display:inline-block; 
    vertical-align:middle; 
    padding:10px; 
    text-align:left; 


} 

<nav> 
    <a href="">Home</a> 
    <a href="">LOOOOOOONG</a> 
    <img src="http://hottdoggfilms.com/hottdoggHover.png" alt="" /> 
    <a href="">shrt</a> 
    <a href="">LOOONG</a> 
</nav> 

Answer 2

嘗試寬度添加到#about-us'元件100像素和降低.divider元件的寬度145px。

Answer 3

我同意上面的答案，將圖像作爲導航的一部分是一個更好的解決方案。

但是，如果你想保留你現在擁有的東西，你可以使用：nth-​​child選擇器。

http://www.w3schools.com/cssref/sel_nth-child.asp https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

你的情況：

.nav > li:nth-child(3) { 
    margin-left: 60px; //as much as you need 
} 

//and for when the menu collapses 
.nav > li:nth-child(3).small-screen { 
    margin-left: 0; //or whatever the default is 
}