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 标记会低于它。

＆＃13;

<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>

＆＃13;

Answer 2

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

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

Plus：不建议使用内联样式，因为代码变得不易维护。尝试在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中定位水平线

2 个答案: