-1

我想要一条虚线来填充两个单词/句子之间的空格。我需要自动调整单词之间的虚线。但在小提琴中的结果并不清楚。

http://jsfiddle.net/shagun_jsfiddle/Z4DCH/6/

HTML

       <div style="position: relative; float: left;overflow: hidden; width: 1000px;" id="index1">
     <span class="left-side">Hello</span>
     <span class="right-side" >Dotted line</span>
</div>
<div style="position: relative; float: left;overflow: hidden; width: 850px; " id="index2">
     <span class="left-side">Hello</span>
     <span class="right-side" >Dotted line</span>
</div>

CSS 

        .left-side{width: auto;
     max-width: 26%;
     min-width: 0%;
     text-align: justify;
     background-color: transparent;
     display: inline-block;}
.left-side:before{float: right;
     width: 0;
     white-space: nowrap;
     line-height:11px;
     content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ;
}
.right-side{width: auto;
     max-width: 26%;
     min-width: 0%;
     background-color: transparent;
     float: right;
     display: inline-block;}

在图片中，圆圈内容宽度固定为最大和最小宽度。所以点应该是自动调整的。并且不应重叠。

在此处输入图像描述

4

1 回答 1

1

如果您的问题是您的元素没有对齐，那是因为#index1宽度与#index2. 尝试使它们具有相同的宽度。

如果您的问题是这些点没有达到“虚线”内容，那是因为#index1和#index2比您有足够的点覆盖更宽。要么做得#index1更#index2瘦，要么添加更多点。

如果你想要的是让点填充左右内容之间的所有空间（可能是动态的），那么试试这个：

HTML：

<div id="index1">
    <span class="left-side">Hello</span>
    <span class="right-side">Dotted line</span>
</div>

<div id="index2">
    <span class="left-side">Hello</span>
    <span class="right-side">Dotted line</span>
</div>

CSS：

#index1, #index2 {
    width: 400px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAABCAIAAACDoBMqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAABJJREFUGFdj+I8EGBiQuP//AwBO2xfpJMYFgQAAAABJRU5ErkJggg==) repeat-x bottom center;
}
#index2 {
    width: 250px;
}

.left-side {
    background: white;
}

.right-side {
    float: right;
    background: white;
}

示例： http: //jsfiddle.net/Z4DCH/3/ （我删除了许多不必要的样式以简化此示例。）

这通过设置一个 9x1 像素的重复背景图像（带有一个后像素）作为父元素的背景#index1和#index2. 然后，每个子元素都有一个白色背景来覆盖该背景图像。

于 2013-07-25T21:16:04.050 回答