HTML / CSS - 自动调整包装器中内容的宽度

Question

我有一个内容div，内容可变，水平。 我希望此内容div的宽度根据其内容的长度自动调整大小。例如，我希望能够删除任意的＆＃34; 20％＆＃34;值，并相应地具有div大小。目前从宽度中删除20％的值迫使其调整为100％的容器。我错过了什么CSS？

Fiddle

＆＃13;

＆＃13;

.wrapper {
  border: 2px solid green;
}
.content {
  margin: 0 auto;
  text-align: center;
  border: 2px solid orange;
  width: 20%;
}

＆＃13;

<div class="wrapper">
  <div class="content">
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
    <span>Four</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将text-align:center放在包装器上，并将内容div的显示设置为内联或内联块：

＆＃13;

＆＃13;

.wrapper {
  border: 2px solid green;
  text-align:center;
}
.content {
  margin: 0 auto;
  text-align: center;
  border: 2px solid orange;
  display: inline;
}

＆＃13;

<div class="wrapper">
  <div class="content">
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
    <span>Four</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您想要液体调整大小的行为，我建议使用flexbox：

＆＃13;

＆＃13;

.wrapper {
  border: 2px solid green;
  display: flex;
  justify-content: center;
}
.content {
  margin: 0 auto;
  text-align: center;
  border: 2px solid orange;
  /*width: 20%;*/
}

＆＃13;

<div class="wrapper">
  <div class="content">
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
    <span>Four</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

直列：

flexbox：