Question

如何创建一个下划线，填充文本行末尾和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/

FIX

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

Answer 1

这是一个技巧，但它有效（至少在FF测试）：

http://jsfiddle.net/dVtCc/

HTML：

<table>
    <tr>
        <td>
            <span>
                Old Cheese – Salad, Avocado, Egg, 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;
}

技巧是虚线边框实际上跨越整个行的底部，但span的位置是为了掩盖它们正下方的边框。

Answer 2

我在产品上使用float: left，在价格上使用float: right来实现此效果。 See this demo

这需要使用clearfix实施。

HTML

<div class="menu">
    <div class="product clearfix">
        <div class="name">Old Cheese - Salad, Avocado, Egg, Herbal Mayo</div>
        <div class="price">500</div>
    </div>
    <div class="product clearfix">
        <div class="name">Stuff, stuff and more stuff</div>
        <div class="price">100</div>
    </div>
    <div class="product clearfix">
        <div class="name">And a bit more</div>
        <div class="price">200</div>
    </div>
</div>

CSS

.menu {
    border: 2px solid red;
    padding: 5px;
}

.product {
    position: relative;
    border-bottom: 1px dotted black;
}

.product .name {
    float: left;
    border-bottom: 1px solid white;
    margin-bottom: -1px;
}

.product .price {
    float: right;
}


/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

包装效果不如使用表格那么好。

Answer 3

也许并不完全是你想要的但是接近。我想我之前已经看过这个用伪元素解决了但是我找不到它来搜索SO。

JSFiddle Demo

<强> HTML

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

<强> CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.productline {
    width:50%;
    overflow:hidden;
    border:1px solid black;
    padding:15px;
    overflow:hidden;
    position: relative;
}
.product {   
    display: inline-block;
    vertical-align:bottom;
    width:60%;
    line-height:1em;
    border-bottom:1px dashed black;
}

.price {
    vertical-align:bottom;
    display: inline-block;
    width:35%;
    position: relative;
    text-align: right;
    line-height:1em;
    border-bottom:1px dashed black;    
}

用一条线填充空白区域

HTML

CSS

实施例

FIX

3 个答案:

HTML

CSS