html - 如何在 HTML 中对齐多行选择？

我在 Windows 10 中使用 HTML5 编写网站。我想从

像这样的样式:

    {% extends 'base.html' %}
{% load static %}


{% block content %}
<form>
         </select><br>
      <label for="name_1">&nbsp;&nbsp;Discipline Code(e.g. ACC): &nbsp;</label>          <input type="text" id="name_1" name="name_1"><br>
      <label for="name_2">&nbsp;&nbsp;Course Code(e.g. 201): &nbsp;&nbsp;&nbsp;&nbsp;</label>          <input type="text" id="name_2" name="name_2"><br>
      <label for="name_3">&nbsp;&nbsp;Course Title: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>          <input type="text" id="name_3" name="name_3" ><br>

       <label>&nbsp;&nbsp;Postgraduate Course: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <select id="postgraduate-course" >
                <option value="">--Select--</option>
                <option value="Dropdown_yes">Yes</option>
                <option value="Dropdown_no">No</option>
            </select><br>
                   <label>&nbsp;&nbsp;First Presenting Semester: </label>
            <select id="presenting-semester" >
                <option value="">--Select--</option>
                <option value="Dropdown_Jan">January</option>
                <option value="Dropdown_Jul">July</option>
            </select><br>
                               <label>&nbsp;&nbsp;Year: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <select id="year" >
                <option value="">--Select--</option>
                <option value="Dropdown_2021">2021</option>
                <option value="Dropdown_2022">2022</option>
            </select><br>
                  ......            
        <br>
         </form>
         {% endblock %}

也就是说，我想让所有文本输入和选择的开头对齐。标签可以保持其当前位置。

最佳答案

这是一个好元素!

为了微调样式，您需要删除所有   s。然后在 HTML 文件中的某处添加一个元素 <style></style>。 (通常样式位于 <head> 内部，但另一个位置也可以。)

在 style 元素内，您可以使用 CSS 来寻址 HTML 元素。

尝试从以下几行开始:

label {
  display: inline-block;
  width: 200px;
  text-align: right;
  margin-right: 10px;
}

这将建议浏览器将所有 <label> 元素设置为 200 像素宽，并将文本向右对齐，与以下元素留出 10 像素空间。

关于html - 如何在 HTML 中对齐多行选择？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65698729/

html - 如何在 HTML 中对齐多行选择？

上一篇：python - 如何查询当无列表是pyspark中列中的值时

下一篇：intellij-idea - 如何为 Sublime Text 3 使用 IntelliJ 键盘映射