Teken een lijn in een div

Ik wil een div maken die een regel is. Hier is mijn 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>

En hier mijn CSS:

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

Er wordt niets weergegeven, er is waarschijnlijk iets mis in mijn CSS, maar ik kan niet zien wat.


Antwoord 1, autoriteit 100%

Het werkt voor mij

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

Antwoord 2, autoriteit 58%

Css is niet nodig, je kunt gewoon de HR-tag uit HTML gebruiken

<hr />

Antwoord 3, autoriteit 24%

$('.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>

Antwoord 4, autoriteit 6%

Als de div inhoud bevat, is dit de beste gewoonte om een regel boven of onder de div te plaatsen en de inhoudsafstand met de div te behouden

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

Antwoord 5, autoriteit 3%

Beantwoord dit alleen om @rblarsencommentaar op vraag te benadrukken:

Je hebt de styletags in het CSS-bestand niet nodig

Als je de tag styleuit je css-bestand verwijdert, werkt het.

Other episodes