如何在内联块元素之间添加相等的空间？答案

【问题标题】：How to add equal space between inline block elements?如何在内联块元素之间添加相等的空间？
【发布时间】：2016-09-13 17:56:48
【问题描述】：

我不想用块内容自动填充空间。我希望固定宽度的块之间的间距相等，这也很灵活。

我可以通过添加 padding-right: whatever; 然后在 .last 块中添加另一个 padding-right: 0; 来做到这一点，但这非常原始且不适合移动设备。

我的代码：https://jsfiddle.net/9twy5drd/1/

.container {
  width: 100%;
  border: 1px solid red;
  text-align: center;
  padding: 5px 0;
}
.container .block {
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
}

.container2 {
  width: auto;
  border: 1px solid red;
  padding: 5px;
}
.container2 .block {
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
  margin: 0 47px 0 0;
}
.container2 .block.last {
  margin: 0;
}

<div class="container">
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block">Some block</div>
</div>

<p>What we want, but not with fixed method:</p>

<div class="container2">
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block last">Some block</div>
</div>

【问题讨论】：

只是想知道，您使用inline-block 元素是否有特定原因？他们的哪一部分行为符合您的目的？
另外，你想用这个布局解决什么问题？看起来网格系统、媒体查询或 flexbox 可能是您的解决方案。

标签： html css flexbox

【解决方案1】：

您可以使用Flexbox 和justify-content: space-between;

.container {
  width: 100%;
  border: 1px solid red;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px 0;
}
.container .block {
  border: 1px solid green;
  padding: 10px;
}

<div class="container">
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block">Some block</div>
</div>

这里是不支持Flexbox的旧浏览器的js解决方案。我为每个block 元素计算了margin-left，以在元素之间创建相等的间距。还必须删除 HTML 中的空格。

$(window).on("resize", function() {
  var block = $('.container > .block');
  var count = block.length;
  var bWidth = block.outerWidth();
  var pWidth = $('.container').innerWidth();

  var margin = (pWidth - (bWidth * count)) / (count - 1);

  if (margin > 0) block.not(':last').css('margin-right', margin);
}).resize();

.container {
  width: 100%;
  border: 1px solid red;
  text-align: center;
  padding: 5px 0;
}
.container .block {
  border: 1px solid green;
  display: inline-block;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="block">Some block</div><div class="block">Some block</div><div class="block">Some block</div><div class="block">Some block</div>
</div>

【讨论】：

嘿，谢谢，但仅限 IE11。发布的另一个解决方案适用于较旧的浏览器，但不适用于 Safari，并且仅适用于非常新的版本。需要妥协。
我不是 100% 确定，但我认为 js 只是其他解决方案。
@user13176 我添加了可以帮助你的js解决方案。

【解决方案2】：

只需 justify 您的容器，不要忘记使用 text-align-last（Firefox 49 和更新版本不需要前缀）

.container {
  width: 100%;
  border: 1px solid red;
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  padding: 5px;
}

.container .block {
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
}

<div class="container">
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block">Some block</div>
</div>

【讨论】：

有效，但在 Safari 上不受支持。