用于右侧带线和图像的文本的CSS

Question

我需要创建HTML行，其中有文本（可变宽度），行（或小时）和图像。

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

VARIABLETEXT ---------------------------------- IMAGE

并且此行可以始终为100％宽度。

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

我怎么做？

由于

Answer 1

我之前通过使线条达到宽度的100％并浮动最终元素来完成此操作。使用position，您可以将该行放在另外两行之后。

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

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

Answer 2

有几种方法可以实现这个目标

按照此主题，您可以找到答案How to repeat a character in 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;
}

此处链接fiddler