html - 如何在 HTML 的一行中定位两个元素

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>

浮动：左右不起作用。但是，当我完全拉伸滑块时：

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

当块的宽度没有对齐两个元素时，右边会浮线。

简单的解决方案是使用position:absolute;

在我的例子中

我放置position:relative了第二个div

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

您有内容的地方和未读计数的跨度放置在position absolute;

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