分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

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

HTML   发布时间：2022-04-14  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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 – CSS“width：auto”无法正常工作全部内容，希望文章能够帮你解决html – CSS“width：auto”无法正常工作所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：csshtmlwidth无法正常工作
猜你在找的HTML相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap