Geek Answers Handbook

Draw a line in a div

I want to make a div that is a string. Here is my HTML:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="clickable.css" type="text/css" rel="stylesheet" /> </head> <body > <div class="line"></div> </body > </html>

And here is my CSS:

 <style type="text/css"> .line{ width: 112px; height: 47px; border-bottom: 1px solid black; position: absolute; } </style>

Nothing is displayed, something is probably wrong in my CSS, but I can't see that.

+12
source share
5 answers

His work is for me

  .line{ width: 112px; height: 47px; border-bottom: 1px solid black; position: absolute; } 
 <div class="line"></div>
+17
source 

 $('.line').click(function() { $(this).toggleClass('red'); }); 
 .line { border: 0; background-color: #000; height: 3px; cursor: pointer; } .red { background-color: red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <hr class="line"></hr> <p>click the line</p>
+4
source

No need for css, you can just use HR tag from HTML

 <hr />
+4
source

If the div has some content inside, it will be best practice to have a line above or below the div and maintain the distance between the contents with the div

 .div_line_bottom{ border-bottom: 1px solid #ff0000; padding-bottom:20px; } .div_line_top{ border-top: 1px solid #ff0000; padding-top:20px; }
+1
source

Answer this to underline @rblarsen's comment on the question:

You do not need style tags in the CSS file

If you remove the style tag from your CSS file, it will work.

0
source

More articles:


All Articles