Question

我是一个名为标题的div容器。在这个div中有两个元素，一个类型无序列表的菜单栏和一个div容器。我将菜单栏水平居中，另一个div容器应停靠在右侧显示侧，边距为5％。我怎么能这样做，有人有想法吗？

好的，这是我在 jsfiddle 中的小例子：http://jsfiddle.net/nchm3gyj/

HTML

<div class="headline">
        <ul class="navbar">
            <li><a href="#">Home</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Info</a></li>
            <li><a href="#">Downloads</a></li>
        </ul>

        <img class="facebook" src="" />
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
}

.headline {
  height: 60px;
  width: 100%;
  background-color: black;
  margin-top: 10px;
}

.headline .navbar{
  margin: 0px;
  padding: 0px;

  padding-left: 10px;
  padding-right: 10px;

  float: left;
  height: 60px;
  width: auto;
  background-color: yellow;
  list-style: none;
}

.headline .navbar li{
  display: inline;
} 

.headline .navbar li a {
  text-decoration: none;
  line-height: 60px;
  padding-left: 10px;
  padding-right: 10px;
}

.headline .facebook {
  width: 60px;
  height: 60px;
  margin-right: 5%;
  float: right;
}


#clear {
  clear: both;
}

Answer 1

如果您希望导航栏位于父块的中心，这是一种方法。

将display: inline-block应用于.navbar和text-align: center至.headline。

假设您希望导航栏相对于完整居中父块的宽度，您需要从内容流中取出图像。您可以将position: absolute应用于.facebook元素。

.headline {
  height: 60px;
  width: 100%;
  background-color: black;
  margin-top: 10px;
  text-align: center;
  position: relative;
}

.headline .navbar{
  margin: 0px;
  padding: 0px;

  padding-left: 10px;
  padding-right: 10px;

  height: 60px;
  width: auto;
  display: inline-block;
  background-color: yellow;
  list-style: none;
}

.headline .navbar li{
  display: inline;
} 

.headline .navbar li a {
  text-decoration: none;
  line-height: 60px;
  padding-left: 10px;
  padding-right: 10px;
}

.headline .facebook {
  position: absolute;
  top: 0;
  right: 5%;
  width: 60px;
  height: 60px;
}

<div class="headline">
        <ul class="navbar">
            <li><a href="#">Home</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Info</a></li>
            <li><a href="#">Downloads</a></li>
        </ul>

        <img class="facebook" src="http://placehold.it/60x60" />
</div>

Answer 2

我有点不确定你要做什么，这是吗？应用text-align: center到.headline和display: inline-block到.navbar，然后position: absolute到.facebook？

http://jsfiddle.net/nchm3gyj/42/

Answer 3

我认为你可能需要position: absolute脸书图片和display: inline-block你的菜单栏（以.headline为中心）：

http://jsfiddle.net/nchm3gyj/32/

居中于第二个div容器旁边的div容器？

3 个答案: