CSS“width：auto”无法在<div>上运行

Question

我希望.test_info为宽度自动，与#test的宽度不同。

https://jsfiddle.net/ef6ukobf/

#test {
  background: #26A65B;
  height: 30px;
  width: auto;
  margin-top: -8px;
  margin-left: -8px;
  margin-right: -8px;
}
.test_info {
  background: #00ff00;
  border-radius: 5px;
  height: 20px;
  width: auto;
  margin-top: -2px;
  margin-left: 20px;
}

<div id="test">
  <div class="test_info">50</div>
</div>

Answer 1

<div>元素是块级别，默认情况下它占用容器的整个可用宽度。

如果您想要 自动 宽度（取决于内容），您可以这样做：

.test_info {
  display: inline-block; /*or table*/
}

＆＃13;

＆＃13;

#test {
  background: #26A65B;
}
.test_info {
  background: #00ff00;
  display: inline-block;
}

＆＃13;

<div id="test">
  <div class="test_info">50</div>
</div>

＆＃13;

＆＃13;

＆＃13;