如何將邊框底部應用於DIV的每一行？

我的代碼：如何將邊框底部應用於DIV的每一行？

div { 
    border-bottom: 1px solid; 
}

<div> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. 
</div>

由於文字是足夠長的文字換行正在發生。是否可以將CSS格式的底部邊框應用於每行文本？此外，是否有可能讓每個下邊框都是DIV的全寬（即使文本只是線寬的一半或更少）？

來源

2012-01-23 vxl

你可以只申請一個下劃線的文字：

div { 
    text-decoration: underline; 
}

來源

2012-01-23 19:45:53 animuson

你錯過了這一點。他/他希望格式化。 –

@Justin：他的例子說「1px固體」，所以我認爲這並不重要。 – animuson

我需要CSS格式的邊框。 – vxl

text-decoration:underline會的工作，但如果你想在「下劃線」更多的控制權（顏色，樣式，寬度），你可以這樣做：

div { 
    border-bottom: 1px solid; 
    display:inline; 
}

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

來源

2012-01-23 19:48:50

這幾乎是我想要的。是否有可能將內聯div的寬度設置爲100％？ – vxl

您希望看起來像是橫格紙的東西，每行下劃線的寬度都是100％？我不知道任何干淨的方式，但是我可以想出一些做法，如果那就是你以後的做法。 –

正是！我會很感激你的解決方案。 – vxl

一個DIV是塊元素，代替的是，使用一個跨度是一個內聯。

<style> 
div span{ 
    border-bottom: 1px solid; 
} 
</style> 
<div> 
    <span> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. 
    </span> 
</div>

看到這個撥弄着一種不同的方法，使用背景，邊框底部：

http://jsfiddle.net/YcSUQ/3/

來源

2012-01-23 19:49:38

這幾乎是我想要的。是否可以將[tag：span]寬度設置爲100％，以便將邊框設置爲窗口的整個寬度？ – vxl

即使文字不夠長，也可以將邊框的寬度擴展到100％。但是，您需要使用帶點的圖像作爲背景，並重復給出邊界效果： http://jsfiddle.net/YcSUQ/ –

這給出了邊界只用於一行，而文本是否佔用整行。 – vxl

以及爲一體，包裹在<p>

文本，那麼你可以申請

p {border-bottom: 1px solid black;}

來源

2012-01-23 19:49:50

這適用於整個段落，但我需要在文本的每一行都有下邊框。 – vxl

如何將邊框底部應用於DIV的每一行？

回答

相關問題