如何使标签和输入的长度都相同？

Question

我正在使用剃须刀页面开发网络应用程序。我在前端工作 (*.cshtml)。我添加了 4 个对象。每个对象包含一个标签和两个输入。我希望所有三个项目都内联。我还希望所有 4 个对象的标签长度​​相同。与输入相同。我已经想出了如何使 3 个项目显示在一条线上，但我不知道如何使 4 个对象的标签长度​​相同。还有可能使它们的长度相同并且仍然保持响应吗？

视图当前看起来像这张图片。 image shows labels and inputs as uneven

当前cshtml代码

<div class="input-group mb-3 container">
  <div class="row">
    <div clss="col">
      @* Hub Country Field *@
      <div class="row form-inline">
        <label class="input-group-text" for="HubCountryID">HUB Country</label>
        <select class="form-select" id="HubCountryID" onclick="GetHubCountryDesc()" asp-items="@(new SelectList(Model.HubCountries," ID ","HUBCountryID "))">
          <option value="" selected disabled>-- Select HUB Country --</option>
        </select>
        <input class="form-control" type="text" id="HubCountryDescID" readonly />
      </div>
      @* Sales Region field *@
      <div class="row form-inline">
        <label class="input-group-text" for="SalesRegionID">Sales Region</label>
        <select class="form-select" id="SalesRegionID" onclick="GetSalesRegionDesc()" asp-items="@(new SelectList(Model.Regions," ID ","RegionID "))">
          <option value="" selected disabled>-- Select Region --</option>
        </select>
        <input class="form-control" type="text" id="SalesRegionDescID" readonly />
      </div>
      @* Market Channel Field *@
      <div class="row form-inline">
        <label class="input-group-text" for="MarketChannelToCustomerID">Market Channel to Customer</label>
        <select class="form-select" id="MarketChannelToCustomerID" onclick="GetMarketChannelDesc()" asp-items="@(new SelectList(Model.MarketChannels," ID ","MarketChannelID "))">
          <option value="" selected disabled>-- Select Market Channel --</option>
        </select>
        <input class="form-control" type="text" id="MarketChannelToCustomerDescID" readonly />
      </div>
      @* Market Segment Field *@
      <div class="row form-inline">
        <label class="input-group-text" for="MarketSegmentID">Market Segment</label>
        <select class="form-select" id="MarketSegmentID" onclick="GetMarketSegmentDesc()" asp-items="@(new SelectList(Model.MarketSegments," ID ","MarketSegmentID "))">
          <option value="" selected disabled>-- Select Market Segment --</option>
        </select>
        <input class="form-control" type="text" id="MarketSegmentDescID" readonly />
      </div>

Answer 1

您可以尝试将css添加到label和select。例如：

<style>
    label, select {
        width:200px;
    }
</style>

结果：