在div中画一条线

Lae*_*tis 13 html css

我想制作一个行的div.这是我的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>
Run Code Online (Sandbox Code Playgroud)

在这里我的CSS:

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

什么都没有显示,我的CSS可能有些错误,但我看不清楚是什么.

Muk*_*ant 19

它为我工作

 .line{
width: 112px;
height: 47px;
border-bottom: 1px solid black;
position: absolute;
}
Run Code Online (Sandbox Code Playgroud)
<div class="line"></div>
Run Code Online (Sandbox Code Playgroud)


imG*_*rav 8

$('.line').click(function() {
  $(this).toggleClass('red');
});
Run Code Online (Sandbox Code Playgroud)
.line {
  border: 0;
  background-color: #000;
  height: 3px;
  cursor: pointer;
}
.red {
  background-color: red;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)


Pro*_*ver 5

无需CSS,您只需使用HTML中的HR标签

<hr />
Run Code Online (Sandbox Code Playgroud)