html – CSS“width:auto”无法正常工作

前端之家收集整理的这篇文章主要介绍了html – CSS“width:auto”无法正常工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想.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>

解决方法

< div> element是块级别,默认情况下它占用容器的整个可用宽度.

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

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

猜你在找的HTML相关文章