對齊我的標題中的按鈕

-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

對齊我的標題中的按鈕

回答

相關問題