对齐我的标题中的按钮

-3

目前我有8个按钮，全部水平并排显示，作为我的导航栏的一部分。对齐我的标题中的按钮

我想让前四个按钮右对齐，最后四个按钮右对齐我的页面。

我对HTML5和CSS相当陌生。

来源

2015-09-07 Harriet

请分享您的代码（ HTML/CSS）或演示链接。 Thanx –

所以你希望他们都对齐？或者是一个错字？ – putvande

“右对齐......右对齐”，可能是左右对齐？ – starikovs

这是一个简单的例子。只是分享你的链接在两个容器中，并使用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

来源

2015-09-07 09:39:01

顺便说一句，如果你想要一个动态的高度不要忘记clearfix（如果你使用浮动）http://nicolasgallagher.com/micro-clearfix-hack/，这里是这个例子，但没有固定的高度http://jsfiddle.net/infous/3zds0v51/1 / – starikovs

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

来源

2015-09-07 09:36:31

虽然这可能会在理论上回答这个问题，[** it would be **]（// meta.stackoverflow.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>

来源

2015-09-07 09:47:22

对齐我的标题中的按钮

回答

相关问题