用于右边有行和图像的文本的CSS

Question

我需要创建HTML行，其中有文本(具有可变宽度)、一行(或hr)和图像。

文本具有可变的长度，图像具有固定的宽度。我需要这样的东西：

这一行可能永远都是100%宽。

我尝试使用相同的CSS，但没有结果。

我怎么能做到呢？

谢谢

Answer 1

我以前做过这样的工作，让这条线100%的宽度，并浮动结束元素。然后，使用position，您可以将这条线放在其他两条线后面。

将两个浮动元素的background-color设置为父背景的相同颜色，这样它就不会显示它们后面的线条，并且看起来就好像这条线正在扩展/收缩

​

​

这里是一个例子https://jsfiddle.net/0sqL5bc9/2/

Answer 2

有几种方法可以实现这一点。

按照下面的线索，您可能会找到答案如何在HTML中重复一个字符？

示例

<div class="line"> 
    <span ><label for="text">VARIABLETEXT</label></span>
    <span class="image">image</span>
</div>

CSS:

.line{
border-bottom:1px dotted black;
position:relative;
height:16px;
}

.line span{
    display:inline-block;
    position:relative;
    background:white;
    bottom:-2px;
    height:100%;
    padding:0 5px;
}

.line .image{
    position:absolute;
    right:0;
}

费德勒链接到这里