如何根据其内部文本大小调整div宽度

41 浏览
0 Comments

如何根据其内部文本大小调整div宽度

这个问题已经有答案了:

如何使div不大于其内容？

宽度等于内容[重复]

我的想法是让具有.main_content类的div中的每个元素的宽度等于其内部文本的宽度。我该怎么做呢？

正如你所看到的，每个元素(span、h2、p和h6)的宽度与.main_contentdiv的宽度相同。红色边框证明了这一点。

那么，如何使每个div的宽度适应其内部的文本呢？(仅使用CSS)

.main_content {
   width: 100%;
  height: 400px;
  font-weight: 800;
}
.main_content > * {
  border: 1px solid red;
  display: block;
  margin-bottom: 30px;
  text-align: center; 
}

       Growth

5 compelling user referral campaign examples

 

Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.

 

Author

 

P：我一直在尝试手动设置每个元素的width大小。但是代码太多了。有没有聪明的方法来解决这个问题呢？

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

只有一个CSS函数: width: fit-content
请注意：它在IE中不起作用。
试一试：

.main_content {
   width: 100%;
  height: 400px;
  font-weight: 800;
}
.main_content > * {
  border: 1px solid red;
  display: block;
  margin-bottom: 30px;
  text-align: center; 
  width: -moz-fit-content;
  width: fit-content;
}


       Growth
       
5 compelling user referral campaign examples

       
Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
       

       
Author

0
0 Comments

您可以尝试下面的CSS，看看是否有效。

.main_content {
  width: 100%;
  height: 400px;
  font-weight: 800;
}
.main_content>* {
  border: 1px solid red;
  display: table;
  margin: 0 auto;
  margin-bottom: 30px;
  text-align: center;
}


      Growth
      
5 compelling user referral campaign examples

      
Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
      

      
Author

0