如何創建一個下劃線,填充文本行末尾和DIV寬度結束之間的空白區域.

我正在嘗試以下方法：

我希望當屏幕變小時,產品線會中斷.我希望價格保持在右邊,并加下劃線.最后一個單詞(Mayo)和價格之間的空格必須自動填充下劃線.

大屏幕：

老奶酪 – 沙拉,牛油果,雞蛋,草藥梅奧…………………. 500

較小的屏幕：

老奶酪 – 沙拉,牛油果,雞蛋,

草藥梅奧…………………………………… 500

超小屏幕：

老奶酪 – 沙拉,鱷梨,

雞蛋,草藥梅奧……………………… 500

我有以下標記：

Old Cheese – Salad, Avocado, Egg, Herbal Mayo

&nbsp500

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;

}

例

固定

總結

以上是生活随笔為你收集整理的html一行中怎么写空格,html – 用一行填写空格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。