无法在 HTML/CSS 中定位水平线

Question

我的HTML页面有点问题。我想将 水平线 设置在左侧。

到目前为止，我的行始终位于页面的中央，我没有伸手在文本之间移动这条行。

这是我的小 HTML 脚本 :

<html>
    <head>
    {% load staticfiles %}

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>

    <style>

            body {
                font-family: Courier New, Courier, monospace;
                text-align: justify;
                list-style-type: none;
            }

            .header {
                 line-height: 80%;
                 margin:left;
            }
    </style>
    </head>

    <body>

        <div class = "header">
            <h3> Département </h3> 
            <p></p> 
            (variable)
            <hr align="left" width="10%"> 
            <h3> Commune </h3> 
            <p></p> 
            (variable)
        </div>
</html>

我的HTML页面看起来像：

你有什么想法吗？

Answer 1

只需在任何 HTML 元素内添加 （变量） 文本。这样 hr 标签就会在它下面。

<html>
<head>
{% load staticfiles %}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>

<style>

        body {
            font-family: Courier New, Courier, monospace;
            text-align: justify;
            list-style-type: none;
        }

        .header {
             line-height: 80%;
 
        }

</style>
</head>

<body>

    <div class = "header">
        <h3> Département </h3> 
        <p></p> 
        <span>(variable)</span>
        <hr align="left" width="10%"> 
        <h3> Commune </h3> 
        <p></p> 
        <span>(variable)</span>
    </div>
</html>

Answer 2

您可以尝试将 display: inline-block; 设置为您的 <hr> 以将水平线呈现为具有块属性的内联元素。

还要确保您的标记和 CSS 有效！例如。 CSS 规则 margin: left; 是错误的。正确的是：margin-left: 10px;.

另外：不推荐使用内联样式，因为代码变得更难维护。尝试在 HTML 文档的 CSS 部分或单独的 CSS 文件中定义规则。

.header {
  line-height: 80%;
}
hr {
  width: 10%;
  display: inline-block;
}

<div class="header">
  <h3> Département </h3> 
  <p>(variable)</p>

  <hr>
  <h3> Commune </h3> 
  <p>(variable)</p>

</div>

无法在 HTML/CSS 中定位水平线

Impossible to position horizontal line in HTML/CSS

html

css

position