如何避免将文本与html css中的先前选择部分对齐？答案

【问题标题】：How to avoid aligning text with previous selection sections in html css?如何避免将文本与html css中的先前选择部分对齐？
【发布时间】：2018-02-09 17:51:19
【问题描述】：

我有一个 index.html 文件和一个样式文件。到目前为止，这部分在我的网页中看起来是这样的。

注意测验是如何缩进的。但是，我对测验和用户信息使用了相同的样式。在我的样式文件中：

.header{
  margin-top: 2.5%;
  margin-left: 2.5%;
  color: #0381a5;
  font-family: georgia;
  font-size: 40px;
  display: inline-block;
  border-bottom: 3px solid #0381a5;
  width: 95%;
}

.sub-header{
  margin-top: 2.5%;
  margin-left: 5%;
  color: #0381a5;
  font-family: georgia;
  font-size: 30px;
  display: inline-block;
  border-bottom: 3px solid #0381a5;
  width: 92.5%;
}

它们都是子标题。这是我在 index.html 中调用样式的方式

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/style.css" type="text/css" charset="utf-8">
    <title>Cognition Study</title>
</head>

<form action="/cgi-bin/form.py">
  <div class="header">
    Cognition Study
  </div>
  <!--paragraph-->
  <div class="sub-header">
    User Information
  </div>
  <!--dropdown menus-->
  <div class="txt">Continue to the quiz section below.</div>
  <br>
  <div class="sub-header">
    Quiz
  </div>

是什么导致“测验”缩进，如何使其与“用户信息”对齐？

【问题讨论】：

我们无法根据您的代码截图提供帮助，尤其是因为问题不在您向我们展示的代码中。请在此处使用页面的所有相关 HTML 和 CSS 创建一个 sn-p。
您的网站在线吗？如果不能在调试器中使用它，调试 CSS 真的很难。或者，您可以使用类似的代码发布 PLUNKER 并尝试在那里重新创建它。
所提供的代码并未根据问题中的图像复制问题...
这是所有相关代码...我不知道还有什么可能会影响这个

标签： html css alignment margin

【解决方案1】：

我使用了您的代码，没有发现任何问题。可能是您的浏览器有问题？

screenshot

.header{
  margin-top: 2.5%;
  margin-left: 2.5%;
  color: #0381a5;
  font-family: georgia;
  font-size: 40px;
  display: inline-block;
  border-bottom: 3px solid #0381a5;
  width: 95%;
}

.sub-header{
  margin-top: 2.5%;
  margin-left: 5%;
  color: #0381a5;
  font-family: georgia;
  font-size: 30px;
  display: inline-block;
  border-bottom: 3px solid #0381a5;
  width: 92.5%;
}

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/style.css" type="text/css" charset="utf-8">
    <title>Cognition Study</title>
</head>

<form action="/cgi-bin/form.py">
  <div class="header">
    Cognition Study
  </div>
  <!--paragraph-->
  <div class="sub-header">
    User Information
  </div>
  <!--dropdown menus-->
  <div class="txt">Continue to the quiz section below.</div>
  <br>
  <div class="sub-header">
    Quiz
  </div>

【讨论】：