如何在HTML的一行中放置两个元素

Question

Here is my problem:

I need to put this number over"...".

Here is the HTML code:

<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 and left doesnt work. But, when I stretch fully slider:

Answer 1

use 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>

I think this will solve your issue.

jsFiddle Link

Answer 2

When the width of the block does not align the two elements, the right will float line.

Simple solution is to use position:absolute;

In my example

I placed position:relative for the second div

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

where you have content and the span with unread-count it's placed with position absolute;

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