在得到价格之前我如何获得一系列周期？

发布于 2025-01-01 01:12:30 字数 571 浏览 1 评论 0原文

这是我的li，

<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>

我假设我的经期会在价格之前停止，但它们总是重叠...有关如何使经期在价格之前停止的任何想法...

原文

Here is my li

<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>

I assumed my periods would stop right before the price but they always overlap...any ideas on how to make the periods go to right before the price...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

肤浅与狂妄 2025-01-08 01:12:30

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

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

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

Demo: http://jsfiddle.net/L8gyn/

Relevant code:

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

Instead of hard-coding the dot characters, you can also use other methods, such as border or <fieldset> to display dots.

回复收藏 0 原文

晨敛清荷 2025-01-08 01:12:30

这是一种方法。我不认为它特别优雅，但它似乎可以满足您的要求。 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;
}

Here's one method. I don't think it's particularly elegant but it seems to do what you are asking for. http://jsfiddle.net/V5tVx/

The basic method is to position the dots in the background and then use absolute positioning to put the name and price on the left and right sides. I've changed the HTML slightly to make this possible.

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;
}

回复收藏 0 原文