Question

嗨，我有一天可能会在我的网页上使用的是一个标签块（当前非常基本），我希望它们以第一行上有5个块的方式对齐，4第二个块，但它们都水平对齐，在同一点结束（所以它看起来不像缺少一个）

的链接

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;
}

Answer 1

<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/

Answer 2

使用calc()功能＆＃34;前4次使用width:calc(100% / 4); 剩余3次使用width:calc(100% / 3);＆＃34; 如果你有7个跨度元素

Answer 3

Flexbox可以做到这一点：

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

JSfiddle Demo

水平对齐跨度与不均匀的标签量

3 个答案: