在div中画一条线

时间:2015-09-28 09:22:17

标签: 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>

这是我的CSS:

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

没有显示任何内容,我的CSS中可能存在错误,但我无法看到。

5 个答案:

答案 0 :(得分:14)

它为我工作

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

答案 1 :(得分:4)

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

答案 2 :(得分:2)

不需要css,您只需使用HTML中的HR标记

即可
<hr />

答案 3 :(得分:1)

如果div里面有一些内容,这将是最好的做法,在div上方或下方有一条线并保持与div的内容间距

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

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

答案 4 :(得分:0)

回答这个问题只是为了强调 @rblarsen 对问题的评论:

  

您不需要CSS文件中的 style 标记

如果从CSS文件中删除 style 标记,它将起作用。