Question

这是我的李

<li>    
    <input type="checkbox" value="1" data="0" class="select_service fl">    
    <div style="margin-left: 5px; width:509px; float:left;    overflow-x: hidden;    overflow-y: hidden;" class="label">Back Office System - Professional........................................................................................................................................</div>
    <small class="rt white">$996.00</small>
</li>

我认为我的期限会在价格之前停止，但它们总是重叠...有关如何使期限在价格之前走向的任何想法......

Answer 1

将white-space:pre;添加到.label元素，以便该行不再被包裹。

由于标签具有固定宽度，因此您还必须向父（容器）添加固定宽度。否则，<small>元素将不会与.label保持同一行，因为它不适合（在较小的视口中）。

演示：http://jsfiddle.net/L8gyn/

相关代码：

<div style="white-space: pre;
            margin-left: 5px;
            width:509px;
            float:left;
            overflow: hidden;" class="label">

您也可以使用其他方法（例如border或<fieldset>来显示点字符，而不是对点字符进行硬编码。

Answer 2

使用CSS背景和:before伪元素添加点。类似于http://jsfiddle.net/gGdMd/1/

的东西

Answer 3

这是一种方法。我不认为它特别优雅，但它似乎做你要求的。 http://jsfiddle.net/V5tVx/

基本方法是将点放在背景中，然后使用绝对定位将名称和价格放在左侧和右侧。我稍微改变了HTML以使其成为可能。

HTML：

<ul id="pricelist">
    <li>
        <input type="checkbox" />
        <span class="linefiller">
            ...............................................................................................................................
        </span>
        <span class="itemname">Back office system</span>
        <span class="itemprice">$996.00</span>
    </li>
    <li>
        <input type="checkbox" />
        <span class="linefiller">
            ...............................................................................................................................
        </span>
        <span class="itemname">Filing cabinet</span>
        <span class="itemprice">$100.00</span>
    </li>
</ul>

CSS：

#pricelist {
    width:300px;
    margin:auto;
}

#pricelist > li {
    position:relative; /* required so that absolute positioning works later */
}

.itemname {
    display:inline-block;
    position:absolute;
    left:20px; /* leave space for the checkbox */
    top:0px;
    background-color:white; /* so that we don't see dots underneath */
}

.itemprice {
    display:inline-block;
    position:absolute;
    right:0px; /* right-aligned */
    top:0px;
    background-color:white; /* so that we don't see dots underneath */
}

.linefiller {
    display:block;
    max-width:280px; /* should be 20px less than the list width */
    overflow:hidden;
    position:absolute;
    left:20px; /* leave space for the checkbox */
    top:0px;
}

在达到价格之前，我如何拥有一系列期限？

3 个答案:

演示：http://jsfiddle.net/L8gyn/