Нарисуйте строку в div

Я хочу сделать 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, но я не вижу, что.

Ответ 1

Его работа для меня

 .line{
width: 112px;
height: 47px;
border-bottom: 1px solid black;
position: absolute;
}

<div class="line"></div>

Ответ 2

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

Ответ 3

Нет необходимости в css, вы можете просто использовать тег HR из HTML

<hr />

Ответ 4

Если у 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;
}

Ответ 5

Ответьте на это, чтобы подчеркнуть @rblarsen комментарий к вопросу:

Вам не нужны теги стиля в CSS файле

Если вы удалите тег стиля из вашего CSS файла, он будет работать.