回答
這是一個簡單的例子。只是分享你的鏈接在兩個容器中,並使用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.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>
- 1. 標題欄中的Android標題+按鈕未正確對齊
- 2. 對齊按鈕中的JQuery UI圖標
- 3. 對齊按鈕問題
- 4. 對齊標籤與按鈕
- 5. 對齊Bootstrap中的按鈕
- 6. NetBeans中的對齊按鈕
- 7. PyQt4中的對齊按鈕
- 8. 圓形自定義按鈕中的內聯對齊標題
- 9. 無法爲Cocos2d中的按鈕標題設置左對齊
- 10. 在DataGrid列標題中的WPF右對齊按鈕
- 11. 無法對齊Ext JS按鈕中心的按鈕圖標
- 12. 標題標題和按鈕不垂直對齊JQM 1.4
- 13. 'next'按鈕正確對齊的問題
- 14. 的Android按鈕文本對齊問題
- 15. 對齊Javafx按鈕的問題
- 16. 對齊按鈕內的文本/圖標
- 17. 的CSS對齊按鈕,形成標籤
- 18. 我怎樣才能我的Jframe標籤和按鈕對齊
- 19. 按鈕對齊
- 20. 對齊按鈕
- 21. 影響標題對齊的響應菜單按鈕(Angular Material)
- 22. 使用分組按鈕對齊數據網格的列標題
- 23. 如何垂直居中對齊和標題和單選按鈕
- 24. ionic 2 Android標題和按鈕未在導航欄中對齊
- 25. 按鈕位於按鈕中心的對齊按鈕iOS
- 26. 對齊的.aspx按鈕
- 27. 對齊html表格中的按鈕。 IE問題(樓梯問題)
- 28. 在HTML5中我如何按我需要的方式對齊我的標題
- 29. 中心對齊表+按鈕
- 30. 對齊按鈕到中心
請分享您的代碼( HTML/CSS)或演示鏈接。 Thanx –
所以你希望他們都對齊?或者是一個錯字? – putvande
「右對齊......右對齊」,可能是左右對齊? – starikovs