Geek Answers Handbook

Line immediately after text

I would like to have a line that starts right after my text on the same line, I tried with the following simple code

<html><body>My Text<hr/></body></html>

It seems that <hr> not an option, because it is always on a new line, and I want the line to start to the right of my text.

Any help?

+9
html css
source share
11 answers

<hr> has a default style that puts it on a new line. However, this default style can be overloaded, just like with any other element. <hr> is essentially nothing more than an empty <div> with a default border setting.

To demonstrate this, try the following:

 <div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>

There are several ways to override the <hr> style to achieve your goal.

You can try using display:inline-block; along with setting width , as I said above. The downside of this approach is that it requires you to know the desired width, although there are ways to get around this - width:100%; , and the entire line in the <div> container that has overflow:hidden; can do the trick, for example:

 <div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>

Another option is to use float:left; . You need to apply this to all elements of the string, and I do not like it, because I found that float tends to cause more problems than it solves. But try and see if this works for you.

There are various combinations of styles that you can try - let him know what works.

+15
source share

Using the FlexBox Property, this can be easily achieved.

 .mytextdiv{ display:flex; flex-direction:row; align-items: center; } .mytexttitle{ flex-grow:0; } .divider{ flex-grow:1; height: 1px; background-color: #9f9f9f; } 
 <div class="mytextdiv"> <div class="mytexttitle"> My Text </div> <div class="divider"></div> </div>
+12
source share

Try the following:

<html><body>My Text<hr style="float: right; width: 80%"/></body></html>

Inline CSS float: right save it on the same line as the text. You will need to adjust the width if you want it to fill the rest of the line.

+1
source share

Using inline or float , as far as I checked, it does not work correctly, even if that was my first thought. Later I used the following css

 hr { bottom: 17px; position: relative; z-index: 1; } div { background:white; position: relative; width: 100px; z-index: 10; }

HTML

 <div>My Text</div><hr/>

Demo http://jsfiddle.net/mFEWk/

What I did was add a position relative to both elements (to give me the advantage of using z-index ). Also from the moment I had position:relative for hr , I moved it from bottom:17px . This moves it above the div containing the text. Applying z-index values ​​and adding background:white for the div places the text above the line. Of course, do not forget to use the text width for the text, otherwise we take the entire width of the parent element.

+1
source share

 <div style="float: left">Some text</div> <hr style="clear: none; position: relative; top: 0.5em;">

Exactly what you want.

+1
source share

Try it. he works

 <p style="float:left;"> Hello Text <hr style="float:left; width: 80%"/> </p>

You can also use this to draw a line between texts, for example

Hi Hi

+1
source share
 hr { width: {so it fits on the same line as the p tag}; } p { float: left; width: {enough to accomodate the hr}; }

What is the point?

 <p>My text</p> <hr />
0
source share

Here is one potential approach, but it has some assumptions / requirements. Your question should be edited to provide more specific information about what you are building.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Blah</title> <style type="text/css"> body { background-color : white; font-family : Arial; font-size : 16px; } .wrap { background: transparent url(px.png) repeat-x 0px 85%; /* Different fonts or text sizes may require tweaking of that offset. px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */ } .inner { background-color : white; /* Should match the background of whatever it sitting over. Obviously this requires a solid background. */ } </style> </head> <body> <div class="wrap"><span class="inner">Here is some text</span></div> </body> </html>
0
source share

I used the following technique:

Give the container div a background image with a horizontal line. Put an element (e.g. <h3> ) in the div container (I have it on the right, so float: right; )

Use the following CSS:

 .line-container { width: 550px; height: 40px; margin-top: 10px; background-image: url("/images/horizontal_line.png"); } .line-container h3 { padding-left: 10px; float: right; background-color: white; }
0
source share

The OP never indicated the purpose of the line, but I wanted to share what I ended up with when I created the html template where the user needs a line for writing after the document has been printed.

Since the hr tag has its own line by default and defaults to the center value, I decided to use the div and style for it.

HTML

 This is my text.<div class='fillLine'></div>

CSS

 .fillLine { display:inline-block; width: 200px; border-bottom: 1px solid black; }

JSFiddle Demo

Div style for line after text

Hope this helps anyone who has the same goal as me.

0
source share
 Below code did the job for me HTML File: ---------- <p class="section-header">Details</p><hr> CSS File: ---------- .section-header{ float: left; font-weight: bold } hr{ float: left; width: 80%; } INLINE: ------- <p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">
0
source share

More articles:


All Articles