如何定位在一個線上的兩個元素在HTML

這裏是我的問題： enter image description here 如何定位在一個線上的兩個元素在HTML

我需要把這個數字超過「...」。

下面是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>

浮動：左，右不起作用。但是，當我伸展完全滑塊：

enter image description here

來源

2013-08-05 George Pirkulov

我認爲你可以使用的位置是：絕對的放置元素，=>添加位置：相對於你第二個div，以及跨度附加：位置：絕對的;頂部：Xpx;右：0像素; – artSx

我認爲你可以使用響應式css –

當塊的寬度不對準兩個元素，右側將線浮動。

簡單的解決方法是使用position:absolute;

In my example

我把position:relative的第二個div

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

，你有內容，並與跨度未讀，算它放置position absolute;

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

來源

2013-08-05 08:38:43 artSx

使用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 Link

來源

2013-08-05 08:48:39

如果有一個小寬度，計數是break：http://jsfiddle.net/wLpaT/1/ – artSx

然後你必須使用display：inline http://jsfiddle.net/ wLpaT/2 / –

如何定位在一個線上的兩個元素在HTML

回答

相關問題