divの幅をコンテンツの幅と同じにします

Question

私はこの質問にフィドルリンクを貼り付けました。テキストに近づくには赤い点が必要です。最初の&の最後の項目については、うまくいきます。ただし、複数の項目がある場合は、複数の行があります。右に余白があります。ドットが2番目の項目のテキストに近くなるようにします。 0しかしそれは全体のテキスト領域を小さくします。助けてください！

<div class="container"> 
<div class="item"> 
    <span class="icon">1</span> 
    <div class="text">News Section</div> 
    <span class="red"></span> 
</div> 
<div class="item"> 
    <span class="icon">2</span> 
    <div class="text">Sample123 Organizational announcement</div> 
    <span class="red"></span> 
</div> 
<div class="item"> 
    <span class="icon">3</span> 
    <div class="text">Sample Text</div> 
    <span class="red"></span> 
</div> 
</div> 
.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%; 
} 

Link to fiddle

Answer 1

使用white-space: nowrap;クラス.text内部それが働いています。

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

<div class="container"> 
 
<div class="item"> 
 
    <span class="icon">1</span> 
 
    <div class="text">News Section</div> 
 
    <span class="red"></span> 
 
</div> 
 
<div class="item"> 
 
    <span class="icon">2</span> 
 
    <div class="text">Sample123 Organizational announcement</div> 
 
    <span class="red"></span> 
 
</div> 
 
<div class="item"> 
 
    <span class="icon">3</span> 
 
    <div class="text">Sample Text</div> 
 
    <span class="red"></span> 
 
</div> 
 
</div>