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

发布时间：2020-12-14 18:30:06 所属栏目：资源来源：网络整理

导读：我想.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:

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!