Question

我的网页旁边有一个aside，其中包含span个包含博客帖子标记的块。现在，它们设置为display: inline-table，每行放置多个，然后作为溢出转到下一行。

如果可能（并且JavaScript是可以的，但CSS是首选），我怎样才能让这些跨度占据div内部的整个宽度，所以我没有“粗略的边缘”对？我想增加span块之间的边距，或者我也可以增加span的宽度。

以下是我目前的代码：

body {
  background-color: #333;
  color: #333332;
}
aside {
  background-color: white;
  width: 300px;
  height: 300px;
  margin: auto;
}
h2 {
  margin: 24px;
  padding-top: 24px;
}
.tag-wrapper {
  padding: 0px 24px;
}
span {
  display: inline-table;
  text-transform: uppercase;
  background-color: #F77C2F;
  margin: 4px 2px;
  padding: 8px;
}

<div class="container">
  <aside>
    <h2>Tags</h2>
    <div class="tag-wrapper">
      <span>finance</span>
      <span>if</span>
      <span>pv</span>
      <span>pivot tables</span>
      <span>vba</span>
      <span>test</span>
      <span>test</span>
      <span>test</span>
    </div>
  </aside>
</div>

Answer 1

一点灵活的魔术师将完成任务：

#techbutton {
  display: block;
  width: 125px;
  height: 125px;
  background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo21-e1445171629993.png") no-repeat 0 0;
}
#techbutton:hover {
  background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo2-hover-e1445296643552.png") no-repeat 0 0;
}
#techbutton span {
  position: absolute;
  top: -999em;
}

body {
  background-color: #333;
  color: #333332;
}
aside {
  background-color: white;
  width: 300px;
  height: 300px;
  margin: auto;
}
h2 {
  margin: 24px;
  padding-top: 24px;
}
.tag-wrapper {
  padding: 0px 24px;
  display: flex;
  flex-flow: row wrap;
  align-content: stretch;
}
span {
  flex: 1 0 auto;
  text-transform: uppercase;
  background-color: #F77C2F;
  margin: 4px 2px;
  padding: 8px;
}

使用的属性是：

<div class="container"> <aside> <h2>Tags</h2> <div class="tag-wrapper"> <span>finance</span> <span>if</span> <span>pv</span> <span>pivot tables</span> <span>vba</span> <span>test</span> <span>test</span> <span>test</span> </div> </aside> </div>：这会将容器的显示类型设置为flex（也称为flexbox）
display: flex：使项目连续排序，并根据需要进行换行。
flex-flow: row wrap：使项目伸展以填充弯曲方向（行）。
align-content: stretch：使项目“可增长”（1），但不是“可收缩”（0），并在分配剩余空间之前使用自身基础宽度（自动）。

Answer 2

这是你在说什么？如果是这样，只需将span的显示更改为block而不是inline-block。

body {
  background-color: #333;
  color: #333332;
}
aside {
  background-color: white;
  width: 300px;
  height: 300px;
  margin: auto;
}
h2 {
  margin: 24px;
  padding-top: 24px;
}
.tag-wrapper {
  padding: 0px 24px;
}
span {
  display: block;
  text-transform: uppercase;
  background-color: #F77C2F;
  margin: 4px 2px;
  padding: 8px;
}

<div class="container">
  <aside>
    <h2>Tags</h2>
    <div class="tag-wrapper">
      <span>finance</span>
      <span>if</span>
      <span>pv</span>
      <span>pivot tables</span>
      <span>vba</span>
      <span>test</span>
      <span>test</span>
      <span>test</span>
    </div>
  </aside>
</div>

如何在div中均匀分布一组跨度？

2 个答案: