向屏幕边缘折叠边距答案

【问题标题】：Collapse Margin Against Screen Edge向屏幕边缘折叠边距
【发布时间】：2018-10-30 02:41:21
【问题描述】：

我正在尝试创建一个响应式布局，它可以根据需要在小屏幕上将部分中的项目折叠成多行。当前行为有效，但未能利用所有水平空间。如果一个项目是其行中的最后一个项目，我如何禁用右边距？

span {
 white-space: nowrap;
 display: inline-block;
 margin-bottom: 1em;
 margin-right: 10em;
}

<h1>Section 1</h1>
<span>Item 1</span>
<span>Item 2</span>
<h1>Section 2</h1>
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<h1>Section 3</h1>
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>

【问题讨论】：

对于这种类型的布局，flexbox 将是完美的选择。有什么理由不使用它？

标签： html css margin

【解决方案1】：

如果可以改html，可以试试这个：

<section>
  <h1>Section 1</h1>
  <span>Item 1</span>
  <span>Item 2</span>
</section>
<section>
  <h1>Section 2</h1>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  <span>Item 4</span>
</section>
<section>
  <h1>Section 3</h1>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  <span>Item 4</span>
  <span>Item 5</span>
  <span>Item 6</span>
</section>

并使用 css 伪选择器 :last-of-type 这样的：

span {
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 1em;
  margin-right: 10em;
}
span:last-of-type {
  margin-right: 0;
}

【讨论】：

这会禁用该部分中最后一个元素的边距，但我正在尝试删除每一行中最后一个元素的边距。
您可以尝试将 min-width 设置为 span。您可以添加您在视觉上尝试获得的屏幕截图吗？

【解决方案2】：

一种可能的解决方案是将每个块包装在带有overflow: hidden 的section 标记中。然后将项目包装在宽度等于 100% + 一个 margin-right 的 div 中，如下所示：width: calc(100% + 10em);。

这是完整的例子：

section {
  border: 1px dashed coral;
  overflow: hidden;
}

.items {
  border: 1px solid green;
  width: calc(100% + 10em);
}

span {
 white-space: nowrap;
 display: inline-block;
 margin-bottom: 1em;
 margin-right: 10em;
 
 border:1px solid pink;
}

<section>
  <h1>Section 1</h1>
  
  <div class="items">
    <span>Item 1</span>
    <span>Item 2</span>  
  </div>
</section>

<section>
  <h1>Section 2</h1>
  
  <div class="items">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
    <span>Item 4</span>
  </div>
</section>

<section>
  <h1>Section 3</h1>
  
  <div class="items">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
    <span>Item 4</span>
    <span>Item 5</span>
    <span>Item 6</span>
  </div>
</section>

【讨论】：