Best IT Recipes

Underline thickness

I am trying to control the thickness of the underline, however, it seems that this is only one huge horizontal line that does not match the text. How can I make text emphasize the same thickness of text:

<!DOCTYPE> <html> <head> <style type="text/css"> .title { border-bottom: 2px solid red; } </style> </head> <body> <div class="title">test</div> </body> </html>
+3
html css html5 css3
Nov 28 '12 at 19:26
source share
6 answers

The 'border-bottom' style is added to the 'div' tag. Because defult 'divs' are set to 'display: block;' div width is 100%. To solve this problem, add another tag surrounding the text and give the class this tag.

Example: <div><span class="title">test</span></div>

New code:

 <!DOCTYPE> <html> <head> <style type="text/css"> .title { border-bottom: 2px solid red; } </style> </head> <body> <div><span class="title">test</span></div> </body> </html>
+3
Nov 28 '12 at 19:29
source share

you just need to insert display:inline-block; in your css or float element;

+3
Nov 28 '12 at 19:35
source share

The problem is that you are using border , not underline. The border extends the entire length of the element, which by default for a div is width: 100% .

To change this, you must explicitly limit the width of the div with either a float or change its display .

Using width :

 div { width: 10em; /* or whatever... */ }

JS Fiddle demo .

Using float :

 div { float: left; /* or 'right' */ }

JS Fiddle demo .

Using display :

 div { display: inline-block; /* or 'inline' */ }

JS Fiddle demo .

Of course, given that you really want the underline to be below the text and apparently serve to “underline” the text (see the problem with the demo using a specific width if the text is longer than a given width ), it would be easier to just use the built-in an element like a span for this, not a div , because its default behavior is the same behavior you want.

+1
Nov 28 '12 at 19:28
source share

Change div to span .

span is good for short snippets of text on one line.

See here:

Example

0
Nov 28 '12 at 19:28
source share

If you use em instead of px , the border takes on the font size.

 span { font-size:5em; border: solid black; border-width:0 0 0.1em; }​

Here is the fiddle: Fiddle .

0
Nov 28 '12 at 19:32
source share

There seems to be only a way for IE7 to make this work:

 <!DOCTYPE html> <html> <head> <style type="text/css"> h1 { border-bottom: 3px solid red; display: inline; } </style> </head> <body> <div><h1>Hello, world</h1></div> </body> </html>
0
Nov 28 '12 at 19:59
source share


More articles:


All Articles