Question

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

间隔开

margin-right: 16%;

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

我想知道的是，如果有一种方法可以将这些元素间隔开相等的距离，而不使用右边距的百分比。

我尝试使用：

margin-right: auto;

关于这些元素，但似乎没有任何影响。

Answer 1

您可以使用带有justify-content:space-between的Flexbox。

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

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>

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

2 个答案: