Comment positionner deux éléments sur la ligne un en HTML

Question

Voici mon problème:

Je dois mettre ce chiffre sur « ... ».

Voici le code 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 et travail ne marche pas à gauche. Mais, quand je tends complètement curseur:

Answer 1

Lorsque la largeur du bloc n'aligne pas les deux éléments, la droite ligne flotter.

solution simple est d'utiliser position:absolute;

In my example

j'ai placé position:relative pour la deuxième div

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

où vous avez du contenu et la durée de non lu-count il est placé avec position absolute;

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

Answer 2

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

Je pense que cela va résoudre votre problème.

jsFiddle Link