水平對齊跨越標籤數量不均勻

嗨所以我有一天可能會用在我的網頁上，這是一個標籤塊（目前非常基本），我希望它們以這樣的方式對齊：第一行有5個塊，第二行有4個塊，但它們都水平對齊以便在同一點結束（所以看起來並不像一個缺失）水平對齊跨越標籤數量不均勻

這裏是我目前的鏈接http://jsfiddle.net/xs8d6zuh/2/

HTML -

<span><a href="www.google.com">twenty letters long</a></span> 
<span><a href="www.google.com">twelve lette</a></span> 
<span><a href="www.google.com">eight123</a></span> 
<span><a href="www.google.com">ten letter</a></span><br></br> 
<span><a href="www.google.com">twenty letters long!</a></span> 
<span><a href="www.google.com">sixteen letters!</a></span> 
<span><a href="www.google.com">1seven</a></span> 
<span><a href="www.google.com">sixsix</a></span>

CSS -

a { 
text-decoration: none; 
color: #000000; 
border: 2px; 
background-color: #f6f0e0; 
font-family: Arial; 
font-size: 14px; 
padding: 6px; 
border: 1px solid; 
border-color: #d5c898; 
display: inline; 
width: 123px; 
text-align: center; 


} 
a:hover { 
background-color: #000000; 
color: #f6f0e0; 
}

來源

2015-11-04 Davington III

<div class="container"> 
<a href="www.google.com" class="five">Bavaria</a> 
<a href="www.google.com" class="five">twenty letters long</a> 
<a href="www.google.com" class="five">twelve lette</a> 
<a href="www.google.com" class="five">eight123</a> 
<a href="www.google.com" class="five">ten letter</a> 
<a href="www.google.com" class="four">twenty letters long!</a> 
<a href="www.google.com" class="four">sixteen letters!</a> 
<a href="www.google.com" class="four">1seven</a> 
<a href="www.google.com" class="four">sixsix</a> 
</div>

CSS

.container { 
    font-size: 0px; 
} 
a { 
    text-decoration: none; 
    text-align: center; 
    color: #000000; 
    background-color: #f6f0e0; 
    font-family: Arial; 
    font-size: 14px; 
    padding: 6px; 
    border: 1px solid #d5c898; 
    display: inline-block; 
} 
a.five { 
    width: calc(20% - 14px); 
} 
a.four { 
    width: calc(25% - 14px); 
} 

a:hover { 
    background-color: #000000; 
    color: #f6f0e0; 
}

https://jsfiddle.net/xs8d6zuh/2/

來源

2015-11-04 10:48:04 slash197

謝謝:)這是一個非常好的解決方案：d –

使用calc()功能「爲第一個4使用width:calc(100%/4); 剩餘3使用width:calc(100%/3);」如果u有7個跨度元件

來源

2015-11-04 10:50:15

Flexbox，就可以做到這一點：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
span { 
 
    flex: 1 0 20%; 
 
    display: block; 
 
    text-align: center; 
 
} 
 
a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #000000; 
 
    border: 2px; 
 
    padding: 6px; 
 
    background-color: #f6f0e0; 
 
    font-family: Arial; 
 
    font-size: 14px; 
 
    border: 1px solid; 
 
    border-color: #d5c898; 
 
} 
 
a:hover { 
 
    background-color: #000000; 
 
    color: #f6f0e0; 
 
}

<div class="container"> 
 
    <span><a href="www.google.com">Bavaria</a></span> 
 
    <span><a href="www.google.com">twenty letters long</a></span> 
 
    <span><a href="www.google.com">twelve lette</a></span> 
 
    <span><a href="www.google.com">eight123</a></span> 
 
    <span><a href="www.google.com">ten letter</a></span> 
 
    <span><a href="www.google.com">twenty letters long!</a></span> 
 
    <span><a href="www.google.com">sixteen letters!</a></span> 
 
    <span><a href="www.google.com">1seven</a></span> 
 
    <span><a href="www.google.com">sixsix</a></span> 
 
</div>

JSfiddle Demo

來源

2015-11-04 11:31:07

水平對齊跨越標籤數量不均勻

回答

相關問題