Question

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

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

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

<div class="item wrap">hello</div><!-- NO SPACE --><div class="item wrap">hey</div>

我想为 IE9 +浏览器生成相同的布局而不改变HTML 。假设父级为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;
}

<div class="item wrap">hello</div><!-- NO SPACE --><div class="item wrap">hey</div>

Answer 1

编辑：

display:table

的解决方案

让我知道这个是否能解决问题;）

＆＃13;

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

＆＃13;

<div class="item wrap">hello</div><!-- NO SPACE --><div class="item wrap">hey</div>

＆＃13;

Answer 2

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

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

<div class="item wrap">hello</div><!-- NO SPACE --><div class="item wrap">hey</div>

Answer 3

您可以尝试将保证金放在包装上，但不能放在最后一项上。检查此代码段。

＆＃13;

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

＆＃13;

<div class="item wrap">hello</div><!-- NO SPACE --><div class="item wrap">hey</div>

＆＃13;

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

单行内联元素

4 个答案: