Question

我想在无序列表中的元素之前应用一定量的空间。以下是网址：http://hottdoggfilms.com。我尝试将带有徽标的狗图片集中在其他列表元素之间。但是元素之间存在不平衡的空间＆＃34; Recent Work＆＃34;和＆＃34;关于我们＆＃34;。我的标记是：

<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'元素100px，并将.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
 }

独立地为内联块元素添加边距

3 个答案: