关于html：使div宽度与其内容宽度相同


Make div width same as its content width

本问题已经有最佳答案，请猛点这里访问。

我在这个问题上附加了一个链接。我需要红点更接近文字。对于第一个和最后一个项目，它工作得很好..但是如果任何项目是多行..它在右侧有多余的空白..我希望点也更靠近第二个项目的文本。我尝试了flex:0，但它使整个文本区域变小。请帮助！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
   <span class="icon">1</span>
   News Section
   <span class="red"></span>
 
 
  <span class="icon">2</span>
  Sample123 Organizational announcement
  <span class="red"></span>
 
 
  <span class="icon">3</span>
  Sample Text
  <span class="red"></span>
 

.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%;
 }

链接到小提琴

相关讨论

在它工作的.text类中使用white-space: nowrap;。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.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
2
3
4
5
6
7
8
9
10
11
12
13
   <span class="icon">1</span>
   News Section
   <span class="red"></span>
 
 
  <span class="icon">2</span>
  Sample123 Organizational announcement
  <span class="red"></span>
 
 
  <span class="icon">3</span>
  Sample Text
  <span class="red"></span>

相关讨论