Как у меня есть ряд периодов, пока я не доберусь до цены?

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

Вот один из методов.Я не думаю, что это особенно элегантно, но, кажется, делает то, что вы просите.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;
}

Answer 3

Используйте фон CSS и псевдоэлемент :before для добавления точек. Нечто похожее на http://jsfiddle.net/gGdMd/1/