让div宽度与其内容宽度相同

18 浏览
0 Comments

让div宽度与其内容宽度相同

这个问题已经有答案了：

如何让一个div不比它的内容更宽？

我在此问题中附上了一个fiddle链接。我需要红色的小圆点更靠近文字。对于第一和最后一个项目，这样做效果很好...但如果任何项目有多行文本，右侧就会有额外的空格...我希望第二个项目的小圆点也更靠近文本。我尝试了flex:0，但它会使整个文本区域变小。请帮帮我！

   1
   News Section
   
  2
  Sample123 Organizational announcement
  
  3
  Sample Text
  
.container {
  width:300px;
  padding: .5em 1em;
 }
.item {
  display: flex;
 }
.icon {
  width: 18px;
 float: left;
 }
.text {
  display: inline-block;
  background: yellow;
 }
.red {
  margin: 0 0 0 0.5rem !important;
  background: #FF0000;
  padding: 0 !important;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
 }

fiddle链接

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

1 答案

0 Comments

在 .text 类中使用 white-space: nowrap; 是有效的。

.container {
  width:300px;
  padding: .5em 1em;
 }
.item {
  display: inline-flex;
 }
.icon {
  width: 18px;
 float: left;
 }
.text {
  display: inline-block;
  background: yellow;
  white-space: nowrap;
 }
.red {
  margin: 0 0 0 0.5rem !important;
  background: #FF0000;
  padding: 0 !important;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
 }


   1
   News Section
   
  2
  Sample123 Organizational announcement
  
  3
  Sample Text

0