javascript - 如何将材料选择和标签并排放在同一行

Question

我想成为同一行中的语言标签和选择选项。但我无法使用引导程序 col-md-6 将它们放在同一行中。整个表单被分成行内相同的 col-sm-6 列。正如您在图像语言标签上看到的那样，选择看起来不像在同一行上，彼此相距很远并且选择字段缩小了。如何使它们在同一行上看起来又好又正常？

这是我在下面尝试的：

<div class="row" style="margin-left:10px;">
          <div class="col-sm-6">
            <ul class="list-unstyled">
              <li>
                <div class="row">
                  <div class="col-md-6">
                      <h4>Language:</h4>
                  </div>
                  <div class="col-md-6" style="text-align:left">
                      <mat-form-field>
                          <select matNativeControl required>
                            <option value="english">English</option>
                            <option value="german">German</option>
                          </select>
                        </mat-form-field>
                  </div>
                </div>
              </li>
            </ul>
            <div class="col-sm-6">
            ...other form elements
            </div>
          </div>

标签： javascriptcssangulartypescript

Answer 1

将以下内容替换为您的h4标签

    <h4 style="display:inline">Language:</h4>

演示Stackblitz