内联块元素之间的自动相等距离答案

【问题标题】：Auto equal distance between inline block elements内联块元素之间的自动相等距离
【发布时间】：2016-04-18 01:46:26
【问题描述】：

我在一个内联块中有一些元素当前正在与

隔开

margin-right: 16%;

我认为将这些间隔设置为百分比会使网站响应更容易，但到目前为止还没有，而且我似乎有很多断点不断调整这些百分比。

我想知道的是，是否有一种方法可以在不使用右侧边距百分比的情况下始终将这些元素间隔相等的距离。

我尝试使用：

margin-right: auto;

在这些元素上也是如此，但这似乎没有影响。

【问题讨论】：

如果是宽度和高度，我建议在边距和百分比中使用 px。

标签： html css inline margins

【解决方案1】：

您可以使用 flexbox，与 justify-content:space-between。

.container {
  display: flex;
  justify-content: space-between;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

或者，使用 CSS 表格布局。

.container {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.container > div {
  display: table-cell;
}
.container > div:nth-child(1) { text-align: left; }
.container > div:nth-child(2) { text-align: center; }
.container > div:nth-child(3) { text-align: right; }

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

或者，使用带有text-align:justify 的内联块。请注意，它可能不适用于缩小的 HTML。

.container {
  text-align: justify;
}
.container:after {
  content: "";
  display: inline-block;
  width: 100%;
}
.container > div {
  display: inline-block;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

【讨论】：

嘿，感谢您的帮助，flexbox 似乎可以解决问题，但我想知道您是否知道可能支持旧版本 Internet Explorer 的解决方案，目前只有 IE 11 支持 flexbox。如果你不知道担心
由于 IE 10+ 支持供应商前缀 flexbox，一些有用的链接 caniuse.com/#feat=flexbox 和 autoprefixer.github.io 我还建议了一些其他解决方案。

【解决方案2】：

如果您需要对旧版浏览器的支持，因此您不想使用 flexbox，您可以使用带有百分比的简单 CSS。

以下是四个<li> 元素的示例，它们等距：

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

ul {
  list-style-type:none;
  padding:0;
}

ul > li{
  float:left;
  width:20%; 
  margin:2.5%;
  /* 100% / 4 <li> = 25% --> 20+2.5% margin each side */
}

<main>
  <ul>
    <li>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga asperiores rerum animi libero tempora aliquid deleniti harum, ullam ea officia est perferendis dicta, et iusto totam alias maxime at!</p>
    </li>
    <li>
      <p>Eum dolore ab, earum quis perferendis quae quidem nulla quia accusamus repudiandae sint et magnam sed, voluptatum enim sapiente quam aliquid, fuga aliquam odio iure sunt animi, minima dolores praesentium.</p>
    </li>
    <li>
      <p>Cupiditate hic incidunt eaque non quasi velit fugit blanditiis, nisi dignissimos reiciendis, possimus nulla? Id esse eius cupiditate sint quod consequuntur neque, unde a, impedit, itaque dignissimos facere cum dolorum.</p>
    </li>
    <li>
      <p>Nisi odit ut, maxime quibusdam error, placeat eaque optio illum consectetur labore deleniti, dolorum molestias inventore nihil. Eius quos, cum quas incidunt cupiditate commodi ullam error dolores porro velit minima!</p>
    </li>
  </ul>
</main>

【讨论】：