html - CSS "width: auto"不适用于

Question

我希望 .test_info 的宽度为 auto，与 #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>元素是 block 级别的，默认情况下它占据容器的整个可用宽度。

如果你希望它是自动宽度(取决于里面的内容)，你可以这样做:

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

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

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