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

Question

我在行内块中有一些元素目前正在 spaced 中

margin-right: 16%;

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

我想知道的是，是否有一种方法可以始终 space 这些元素之间的距离相等，而无需在右边距上使用百分比。

我尝试使用：

margin-right: auto;

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

Answer 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 table 布局。

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

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

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

Auto equal distance between inline block elements

html

css

inline

margins