html - 在同一导航栏中定位元素(左/中/右)

Question

我正在制作一个简单的导航栏，左侧是 Logo ，中间是图片，右侧是一些链接。

我希望这一切都在一行上，彼此相邻，但出于某种原因，我无法将链接与其他链接放在同一行上。

可以看到我的作品here .这是代码:

html {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
  margin: 0;
  background-color: #D8D8D8;
  color: white;
  border: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
nav {
  background-color: #888888;
}
#links {
  height: 30px;
  padding: 10px;
  margin: 0;
}
#links li {
  text-align: center;
  margin: 0;
  height: 30px;
  padding: 0;
  padding-left: 10px;
  padding-right: 10px;
  list-style-type: none;
  display: inline;
}
#container {
  min-width: 624px;
  min-height: 100%;
  position: relative;
}
* {
  margin: 0;
  padding: 0;
}
#links {
  overflow: auto;
  list-style-type: none;
}
#links li {
  height: 25px;
  float: right;
  margin-right: 0;
  border-right: 1px solid #aaa;
  padding: 0 20px;
}
#links li:first-child {
  border-right: none;
}
#links li a {
  text-decoration: none;
  color: #ccc;
  font: 25px/1 Helvetica, Verdana, sans-serif;
  text-transform: uppercase;
  transition: all 0.5s ease;
}
#links li a:hover {
  color: #666;
}
#links li.active a {
  font-weight: bold;
  color: #333;
}
#logo img {
  height: 50px;
  float: left;
  margin-left: 10px;
  cursor: pointer;
}
#arrow {
  text-align: center;
}
#arrow img {
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

<div id="container">
  <nav>
    <ul id="logo">
      <img src="images/logo_tekst.png">
    </ul>
    <ul id="arrow">
      <img src="images/remove-arrow-hi.png">
    </ul>
    <ul id="links">
      <li class="link"><a href="index_pro.html">Pro</a>
      </li>
      <li class="link"><a href="index.html">Recreative</a>
      </li>
    </ul>
  </nav>
</div>

Answer 1

代码被剥离到最低限度，仅包含使定位工作的必需品，应该如下所示:

<div id="container">
    <nav>
        <img id="logo" src="images/logo_tekst.png" />
        <img id="arrow" src="images/remove-arrow-hi.png" />
        <ul id="links">
            <li> <a href="index_pro.html">Pro</a>

            </li>
            <li> <a href="index.html">Recreative</a>

            </li>
        </ul>
    </nav>
</div>

nav {
    position: relative;
}
#logo {
    float: left;
}
#links {
    float: right;
}
#links > li {
    float: left;
    margin-left: 10px;
}
#arrow {
    position: absolute;
    left: 50%;
    width: 40px;
    margin-left: -20px; /* halve the width of the image */
}

我做了什么:

1. 我修复了你的 html，img 不能是 ul 的直接子级，只有 li 可以。无论如何都不需要任何额外的包装器，所以我只是删除它们并将 id 移动到图像上。
2. 为了让你的标志总是在左边，我只是把它向左浮动
3. 为了使您的菜单始终显示在右侧，我只是将其 float 到右侧。
4. 为了让箭头居中，我变得更有创意了。我将它定位为绝对位置(注意导航上的相对位置，这样它将作为引用)并将左侧设置为 50%。这会导致图像的左边缘正好位于中心。然后我将该边缘向左移动，方法是将左边距设置为负值，使图像宽度减半。如果您事先不知道图像的宽度(或者如果它不是图像，而是某种动态内容)，您也可以执行 transform: translate(-50%,0)而不是 margin-left 以获得相同的效果。

可在此处找到演示:http://jsfiddle.net/73ejv2sg/