对齐我的标题中的按钮
这是一个简单的例子。只是分享你的链接在两个容器中,并使用float属性:
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;
}
<nav>
\t <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>
\t <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> \t
顺便说一句,如果你想要一个动态的高度不要忘记clearfix(如果你使用浮动)http://nicolasgallagher.com/micro-clearfix-hack/,这里是这个例子,但没有固定的高度http://jsfiddle.net/infous/3zds0v51/1 / – starikovs
Float
是你的朋友。 Float: right;
会将元素对齐到父元素中,并强制其他内容在浮动元素周围流动。所以你必须向右浮动第一个四个按钮,然后向左或向右浮动剩余的按钮(如果你在原始问题中误解了方向)。看看documentation和demo。
虽然这可能会在理论上回答这个问题,[** it would be **](// meta.*.com/q/ 8259)在这里包括答案的重要部分,并提供参考链接。只有链接的答案可能会失效,如果链接的页面发生变化 –
谢谢,我已经完成了我的答案和细节。 –
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>
请分享您的代码( HTML/CSS)或演示链接。 Thanx –
所以你希望他们都对齐?或者是一个错字? – putvande
“右对齐......右对齐”,可能是左右对齐? – starikovs