如何下调HTML页面select选择框位置使其与前方文本居中对齐

样式修改 #

在页面样式中新增以下CSS规则：

/* 统一所有行内表单元素和文本垂直居中 */
select, .button4, .h4 {
  vertical-align: middle;
}
/* 统一所有选择行的上下间距，数值可根据需要调整 */
.discipline-row {
  margin-bottom: 16px;
}
/* 清除p标签默认边距避免额外间距 */
p {
  margin: 0;
}

HTML代码调整 #

找到第一行选择框的外层flex容器，修改对齐属性和边距类：
原代码：

<div class="d-sm-flex align-items-xl-stretch justify-content-between mb-4">

修改为：

<div class="d-sm-flex align-items-center justify-content-between discipline-row">

可以同时删除h1标签内用于缩进的  ，改用CSS的padding-left属性控制缩进更规范。

JS动态插入逻辑修改 #

修改#add_more点击事件中的插入内容，删除多余的<br><br>和大量用于缩进的 ，统一用类和内边距控制布局：

$('#add_more').click(function(e){
    e.preventDefault();
    ++current_id;
    $("p").before(`<div class='field discipline-row' id="${current_id}" style="padding-left: 220px;">
        <select name="${current_id}">
            <option value="All Disciplines" selected disabled hidden>--Select--</option>
            <option value="All Disciplines" name="discipline_name_all2">All Disciplines</option>
            {% for discipline in query_results %}
            <option value="{{ discipline.name }}" name="discipline_name2">{{ discipline.name }}</option>
            {% endfor %}
        </select>&ensp;&nbsp;
        <button class="button4" type="button" onclick="delete_button_clicked2(this.id)" id="${current_id}">&#x2716;</button>
    </div>`);
    console.log(current_id);
});

调整padding-left的数值即可让动态添加的选择框和第一行的选择框左对齐，所有行的间距通过discipline-row类统一控制，不会出现间距不一致的问题。

内容的提问来源于stack exchange，提问作者django