如何定位在一个线上的两个元素在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

回答

相关问题