Question

目前我有8个按钮，所有按钮都是水平并排显示的，作为导航栏的一部分。

我希望前四个按钮右对齐，最后四个按钮在我的页面上右对齐。

我对HTML5和CSS很新。

Answer 1

这是一个简单的例子。只需在两个容器中共享您的链接并使用float属性：

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  min-width: 960px;
  height: 2em;
  margin: 0;
  padding: 1em;
  background-color: black;
}
nav .logo {
  float: left;
  font-size: 1.7em;
  color: white;
}
nav li {
  float: left;
  list-style: none;
  margin-left: 1em;
}
nav li a {
  text-decoration: none;
  color: white;
}
nav ul {
  margin: .3em;
  padding: 0;
}
nav .left-menu {
  float: left;
}
nav .right-menu {
  float: right;
  padding-right: 2em;
}
nav .right-menu::after {
  content: '';
  display: table;
  clear: both;
}

＆＃13;

<nav>
	<span class="logo">LOGO</span>
  <ul class="left-menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
	<ul class="right-menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>

＆＃13;

Answer 2

Float是你的朋友。 Float: right;会将元素对齐在其父级中，并强制其他内容在浮动元素周围流动。所以你必须向右浮动前四个按钮，向右或向左浮动剩余的按钮（如果你在原始问题中误解了方向）。请查看documentation和demo。

Answer 3

Flexbox有一个选项：

.wrap {
  width: 80%;
  margin: auto;
  border: 1px solid grey;
  padding: .25em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.box {
  width: 50px;
  height: 50px;
  background: red;
  margin: 0 .25em;
}
.box:nth-child(5) {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  margin-left: auto;
}

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

对齐标题中的按钮

3 个答案: