html – 用一行填写空格

发布时间：2020-12-14 23:24:33 所属栏目：资源来源：网络整理

导读：如何创建一个下划线,填充文本行末尾和DIV宽度结束之间的空白区域. 我正在尝试以下方法：我希望当屏幕变小时,产品线会中断.我希望价格保持在右边,并加下划线.最后一个单词(Mayo)和价格之间的空格必须自动填充下划线. 大屏幕：老奶酪 – 沙拉,牛油果,鸡蛋,草

如何创建一个下划线,填充文本行末尾和DIV宽度结束之间的空白区域.

我正在尝试以下方法：

我希望当屏幕变小时,产品线会中断.我希望价格保持在右边,并加下划线.最后一个单词(Mayo)和价格之间的空格必须自动填充下划线.

大屏幕：
老奶酪 – 沙拉,牛油果,鸡蛋,草药梅奥…………………. 500

较小的屏幕：
老奶酪 – 沙拉,
草药梅奥…………………………………… 500

超小屏幕：
老奶酪 – 沙拉,鳄梨,
鸡蛋,草药梅奥……………………… 500

我有以下标记：

HTML

<div class="productline">
  <div class="product">
    Old Cheese – Salad,Avocado,Egg,Herbal Mayo
  </div>
  <div class="line">&nbsp</div>
  <div class="price">500</div>
</div>

CSS

.productline {
    width:300px;
}
.product {
    display:table-cell;    
    white-space: nowrap;
}
.line {
    border-bottom: 1px solid black;
    display: table-cell;
    width:100%;
}
.price {
    border-bottom:1px solid black;
    display: table-cell;
    white-space: nowrap;
    vertical-align:bottom;
}

例

http://jsfiddle.net/florisvl/zV6Yd/

固定

http://jsfiddle.net/florisvl/3b7Tr/

解决方法

这是一个技巧,但它的工作原理(至少在FF测试)：

http://jsfiddle.net/dVtCc/

HTML：

<table>
    <tr>
        <td>
            <span>
                Old Cheese – Salad,Herbal Mayo
            </span>
        </td>
        <td class="price">
            <span>
                500
            </span>
        </td>
    </tr>
</table>

CSS：

table{
    border-collapse: collapse;
    width: 100%;
}

td{
    border-bottom: 3px dotted black;
    vertical-align: bottom;
    padding: 0;
}

td.price{
    text-align: right;
}

td > span{
    background-color: white;
    position: relative;
    bottom: -5px;
}

技巧是虚线边框实际上跨越整个行的底部,但跨度被定位以覆盖它们正下方的边界.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!