如何将 Select/ComboBox 的宽度与普通 div 中的宽度对齐或更改？答案

【问题标题】：How can I align or change the width of a Select/ComboBox with the one from a normal div?如何将 Select/ComboBox 的宽度与普通 div 中的宽度对齐或更改？
【发布时间】：2021-01-19 00:02:22
【问题描述】：

<div class="row">
          <div class="col-md-12">
              <form asp-action="Create">
                  <div class="form-group">
                      <div>H</div>
                      <input asp-for="H" type="time" class="form-control" />
                      <span asp-validation-for="H" class="text-danger"></span>
                  </div>

                   <div class="form-group">
                      <div>C</div>
                      <div class="row">
                          <select data-placeholder="E" asp-for="IdC" class="form-control" asp-items="ViewBag.C"></select>
                      </div>
                  </div>
              </form>
          </div>
      </div>

好的，我的 Asp.Net 应用程序视图中有一个类似这样的代码，其中有一个输入 Div 和一个 Select，我想知道，如何使 Select 的宽度与输入 Div，而不是稍微宽一点？

基本上，这是：

【问题讨论】：

标签： html css asp.net-core razor combobox

【解决方案1】：

在您的代码中，您有一个<div class="row"，它提供了额外的填充（或边距）我删除了不需要的代码，它们再次对齐。见 sn-p。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <div class="row">
   <div class="col-md-12">
     <form asp-action="Create">
       <div class="form-group">
          <div>H</div>
          <input asp-for="H" type="time" class="form-control" />
          <span asp-validation-for="H" class="text-danger"></span>
        </div>
        <div class="form-group">
          <div>C</div>
          <select data-placeholder="E" asp-for="IdC" class="form-control" asp-items="ViewBag.C"></select>
        </div>
     </form>
  </div>
 </div>

【讨论】：

谢谢！！没想到这么简单（：

【解决方案2】：

只需删除选择框周围的<div class="row">。该行两侧的边距为 -15px，这就是它延伸到容器外部的原因。

https://jsfiddle.net/wc3bLem4/

<div class="container">
      <div class="row">
          <div class="col-md-12">
              <form asp-action="Create">
                  <div class="form-group">
                      <div>H</div>
                      <input asp-for="H" type="time" class="form-control" />
                      <span asp-validation-for="H" class="text-danger"></span>
                  </div>

                   <div class="form-group">
                      <div>C</div>
                      
                          <select data-placeholder="E" asp-for="IdC" class="form-control" asp-items="ViewBag.C"></select>
                      
                  </div>
              </form>
          </div>
      </div>
 </div>

【讨论】：