html - HTMLで1行に2つの要素を配置する方法

Question

これが私の問題です：

この番号を「...」の上に置く必要があります。

HTMLコードは次のとおりです。

<div class=" unread-object">

            <div style="overflow: hidden; text-overflow: ellipsis;">

                <a class="k-link nowrappable outdate-object" href="#/view/19260">
                    л ьотрипмасвчувсапмдгбыцячшльогтрнамам ам маугшпгнплрплроsdsds 
                </a>


                 <span class="unread-count" style="font-weight:normal; font-size:9px; color:rgb(161,187,206);float:right;">[3]</span>


            </div>
        </div>

float:right と left が機能しません。しかし、スライダーを完全に伸ばすと：

Answer 1

使用するdisplay:inline-block

<a class="k-link nowrappable outdate-object" href="#/view/19260" style="display:inline-block;">л ьотрипмасвчувсапмдгбыцячшльогтрнамам ам маугшпгнплрплроsdsds</a>

<span class="unread-count" style="font-weight:normal; font-size:9px; color:rgb(161,187,206); display:inline-block;">[3]</span>

これで問題が解決すると思います。

jsFiddle リンク

Answer 2

ブロックの幅が 2 つの要素を揃えていない場合、右側の行が浮きます。

簡単な解決策は使用することですposition:absolute;

私の例では

position:relative2番目のdivに配置しました

<div style="overflow: hidden;position:relative; text-overflow: ellipsis;">

コンテンツがある場所と、それが配置されている未読カウントのあるスパンposition absolute;

.unread-object .unread-count{
   position:absolute;
    right:0px;
    top:0px
}