javascript - HTMLCSS Underline full width - Stack Overflow

admin管理员组

文章数量:1353303

I'm trying to figure out how to make the underlines/borders full width for each line without adding
in the paragraphs. Does anyone have any ideas how I should approach this?

The two solutions I have so far is to add the or create an image of it, but that is not the ideal case.

Any help is appreciated, thank you.

HTML

<p>We are always on the lookout for great talent. Please send in your resume or portfolio to [email protected]. The following positions are open.</p>

CSS

p {
    border-top: thin soild #000;
}

I'm trying to figure out how to make the underlines/borders full width for each line without adding
in the paragraphs. Does anyone have any ideas how I should approach this?

The two solutions I have so far is to add the or create an image of it, but that is not the ideal case.

Any help is appreciated, thank you.

HTML

<p>We are always on the lookout for great talent. Please send in your resume or portfolio to [email protected]. The following positions are open.</p>

CSS

p {
    border-top: thin soild #000;
}

• javascript
• html
• css

Share Improve this question Follow edited Jan 4, 2014 at 3:59 Albert Xing 5,78833 gold badges2323 silver badges4040 bronze badges asked Jan 4, 2014 at 3:48 ttran4040ttran4040 17011 gold badge22 silver badges1212 bronze badges 4

• 3 Please add some code or explain better your situation, I cant understand what your asking. – Victor York Commented Jan 4, 2014 at 3:52
• I'm trying to just mimic the image with underline/border. – ttran4040 Commented Jan 4, 2014 at 3:55
• Could it be the div or the item that it is in? – BuddhistBeast Commented Jan 4, 2014 at 3:57
• Right now I'm trying to not make each line it's seperate div for the sake of responsive and cleanliness. – ttran4040 Commented Jan 4, 2014 at 3:58

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

If the line height is fixed you could do it with a gradient:

p{
  line-height: 20px;
  color: #333;
  background-image: 
    repeating-linear-gradient(180deg, transparent, transparent 19px, #333 20px);
}

http://jsfiddle/t2VG4/

I had a minor issue where the lines appeared as gradients, the fix was to specify that the switch from transparent to black took place over 0.1px so that its undetectable

p {line-height: 27px;
    color: #333;
    background-image: repeating-linear-gradient(180deg
, transparent, transparent 24px, #333 24.1px, #333 25.1px);
}

Just put text into span element.

http://jsfiddle/nukec/3bUFC/

<span style="border-bottom: 1px solid red">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </span>

The CSS solution would be to set the line-height (30px here) and then adjust the stop locations on the repeating-linear-gradient to align with the text (29px and 30px):

p {
    line-height:30px;
    background-image: repeating-linear-gradient(180deg, transparent, transparent 29px, grey 30px);
    border-top:1px solid grey;
}

However, keep in mind that each browser engine's gradient generator was built towards smooth color transitions, not pixel-crisp edges, so your results may vary. The best solution would probably be to create a tiling image (with transparency and a horizontal line) and use that as the background-image.

Absolutly not, must be a totally blank underline full page width.

TBNK

本文标签： javascriptHTMLCSS Underline full widthStack Overflow