单行内联元素答案

【问题标题】：Inline elements in single line单行内联元素
【发布时间】：2016-10-28 06:38:06
【问题描述】：

我正在尝试一种布局，我需要将每个项目放在单行中。这些项目的宽度取自其中的内容。像这样的：

预期输出： （仅适用于现代浏览器）

.item {
  padding: 10px;
  background-color: skyblue;
}
.wrap {
  width: max-content;  /* works only in modern browsers */
  margin: 5px auto;
}

&lt;div class="item wrap"&gt;hello&lt;/div&gt;&lt;!-- NO SPACE --&gt;&lt;div class="item wrap"&gt;hey&lt;/div&gt;

我想在不改变 HTML 的情况下为 IE9+ 浏览器生成相同的布局。假设父级为body 标签。

如果我对父元素使用white-space: pre-line，我可以得到这样的结果：

我可能的解决方法：

.item {
  padding: 10px;
  background-color: skyblue;
}
.wrap {
  display: inline-block;
}
body {
  white-space: pre-line;
  text-align: center;
}

<div class="item wrap">hello</div>
<div class="item wrap">hey</div>

但在 HTML 中，.item 元素之间没有空格。所以，这行不通。

解决方法失败，因为 HTML 标记之间没有空格：

.item {
  padding: 10px;
  background-color: skyblue;
}
.wrap {
  display: inline-block;
}
body {
  white-space: pre-line;
  text-align: center;
}

&lt;div class="item wrap"&gt;hello&lt;/div&gt;&lt;!-- NO SPACE --&gt;&lt;div class="item wrap"&gt;hey&lt;/div&gt;

【问题讨论】：

标签： html css

【解决方案1】：

只需在.wrap 上添加display: table;。

body {
  text-align: center;
}
.item {
  padding: 10px;
  background-color: skyblue;
}
.wrap {
  display: table;
  margin: 5px auto;
}

&lt;div class="item wrap"&gt;hello&lt;/div&gt;&lt;!-- NO SPACE --&gt;&lt;div class="item wrap"&gt;hey&lt;/div&gt;

【讨论】：

【解决方案2】：

编辑：

display:table的解决方案

如果这个能解决问题，请告诉我 ;)

.item {
  padding: 10px;
  background-color: skyblue;
    margin: 5px auto;
   display:table

}

&lt;div class="item wrap"&gt;hello&lt;/div&gt;&lt;!-- NO SPACE --&gt;&lt;div class="item wrap"&gt;hey&lt;/div&gt;

【讨论】：

@Mr_Green 添加了 display:table 的解决方案，我知道应该可以工作。它适用于 IE 8 +
是的，它有效，但有人已经提供了相同的解决方案。所以我接受了。谢谢:)

【解决方案3】：

您可以尝试将边距设置在换行上，但不能放在最后一项上。检查这个sn-p。

.item {
  padding: 10px;
  background-color: skyblue;
}
.wrap {
  display: inline-block;
}
.wrap:not(:last-child){
  margin-right:10px;
}
body {
  white-space: pre-line;
  text-align: center;
}

&lt;div class="item wrap"&gt;hello&lt;/div&gt;&lt;!-- NO SPACE --&gt;&lt;div class="item wrap"&gt;hey&lt;/div&gt;

【讨论】：

【解决方案4】：

如果您希望它们位于同一行中，则需要将 .item div 标记为内联块。将它们标记为内联块还允许您为它们添加填充、边距。

另外，最好将 .items 包装在 .wrap 容器中。

.item {
  padding: 10px;
  background-color: skyblue;
  display: inline-block;
  margin: 5px;
}
.wrap {
  padding: 10px;
  text-align: center;
}

<div class="wrap">
    <div class="item">hello</div>
    <div class="item">hey</div>
</div>

【讨论】：