gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 08:15:57 28 4
gpt4 key购买 nike

我在 Windows 10 中使用 HTML5 编写网站。
我想对齐
enter image description here
样式如下:
enter image description here

    {% 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 %}
也就是说,我想让所有文本输入和选择的开头对齐。
标签可以保持其当前位置。

最佳答案

这是个好元素!
对于微调样式,您需要摆脱所有 &nbsp; s。然后添加一个元素 <style></style>在您的 HTML 文件中的某处。 (通常样式在 <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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com