Html 将边距单独添加到内联块元素

我想在无序列表中的元素之前应用一定量的空间。以下是URL:。我试图将带有徽标的狗的图片集中在其他列表元素之间。但在“最近的作品”和“关于我们”这两个元素之间存在着不平衡的空间。我的标记是：

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

---

对我来说，导航是相当混乱的，与分割和所有。 为什么不寻求一个更简单的解决方案呢？

nav{
保证金：0自动；
边框：1px黑色虚线；
文本对齐：居中；
}
导航a{
位置：相对位置；
顶部：-100px；
显示：内联块；
垂直对齐：中间对齐；
填充：10px；
文本对齐：左对齐；
}

尝试为

#about us'

元素100px增加宽度，并将

.divider

元素的宽度降低到

145px

我同意上述答案，将图像作为导航的一部分是更好的解决方案

但是，如果要保留现有的内容，可以使用：n子选择器

就你而言：

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

---

这不符合我的目的。“最近的工作”和分隔符之间有多余的空间

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>

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