如何使用此样式输入在其受尊重的元素上方设置标签？

Question

我已经设置了输入样式（我将把 CSS 放在这里，它最终变得太复杂了，我已经忘记了我需要删除和修复的地方）。我正在尝试让标签适合我的输入、我的选择选项和我的输出。

/* ================== */
/* === GLOBAL CSS === */
/* ================== */

/* Input Placeholder and Select Text Size */

input[type="number"]::-webkit-input-placeholder {
  font-size: 75%;
  line-height: 1.5;
}

input[type="number"]::-moz-placeholder {
  font-size: 75%;
  line-height: 1.5;
}

input[type="number"]:-moz-placeholder {
  font-size: 75%;
  line-height: 1.5;
}

input[type="number"]:-ms-input-placeholder {
  font-size: 75%;
  line-height: 1.5;
}

select.form-select {
  font-size: 75%;
  box-sizing: border-box;
}

select.form-select,
input.reset_form {
  height: calc(1.5em + 0.75rem + 2px);
}

.form-group .row .col:first-child {
  padding-right: 0;
}

.form-group .row .col:last-child {
  width: auto;
}

.form-group {
  display: flex;
  align-items: center;
}

.form-group .row {
  flex: 1;
}

.form-group .row .col:first-child {
  flex: 1;
}

label.form-label {
  padding-top: 6px;
}

/* Set height of input boxes */

.form-control.input-rounded-start {
  height: 34px;
}

.input-group-text {
  height: 34px;
  padding: 0.375rem 0.75rem;
}




/* ================= */
/* === LOCAL CSS === */
/* ================= */


td.form-group {
  display: flex;
  align-items: center;
}

td.form-group label.form-label {
  padding-top: 6px;
}

.input-wrapper {
  display: flex;
  align-items: center;
}

.input-group {
  display: flex;
  width: 100%;
}

.input-group input {
  width: 75%;
  display: inline-block;
  vertical-align: middle;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem 0 0 0.25rem;
}

.input-group select {
  max-width: 20%;
  display: inline-block;
  vertical-align: middle;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #f0f0f0;
  border: 1px solid #ced4da;
  border-left: none;
  border-radius: 0 0.25rem 0.25rem 0;
}

.row-input {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.row-input .form-control {
  height: calc(1.5em + 0.75rem + 2px);
}

.input-group {
  display: flex;
  align-items: center;
  flex: 1;
}

.input-group input {
  width: 60%;
}

.input-group select {
  width: 15%;
  margin-left: -1px;
}

.output-group {
  width: 25%;
  margin-left: -1px;
}

.select-input {
  width: 10% !important;
}

.output-group {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  color: #555;
  font-style: italic;
}

.input-label-container {
  position: relative;
}

.label-above {
  position: absolute;
  top: -1.3em;
  font-size: 0.8em;
  opacity: 0.7;
}

<section class="container border border-primary bg_cont mb-3">
  <div class="row justify-content-center">
    <div class="col-lg-10 mx-auto">
      <div class="card shadow-sm p-3 mt-1 mb-1">
        <span></span>
        <div class="card-body">
          <div class="row mb-3 row-input">
            <div class="col-md-12">
              <label for="input" class="form-label d-none d-sm-inline">Input</label>
              <div class="input-group p-1">
                <input type="number" name="" id="" class="reset_form formCheck maxAllow form-control input-rounded-start">
                <!-- Label Needs To Go Here -->
                <select class="form-select select-input" name="unitsVelocity" id="units">
                  <option value="c" selected>c</option>
                </select>
                <!-- Label Needs To Go Here -->
                <div class="form-control output-group" id="value">
                  *stuff*</div>
              </div>
            </div>
          </div>
        </div>

        <!--          More stuff  -->
</section>

标签，如果我把它们放在那里，只是打破输入和选择框。 （下图）。 我知道我需要将它们放入列中，但我希望输出看起来像下图，除了元素上方的标签。

我试过操纵列等，但这最终会打破盒子。

我有很多 CSS 可以按照我想要的方式保存我的输入（检查片段）。

lavel-above和container的想法很好，但是没有把labels放在上面不破坏输入框

这是我目前最好的...任何想法都会很棒。我正在使用 Bootstrap 5.2

总结：我希望我的选择框和输出框上方有标签，就像我在输入框上方有标签一样。我想为我的所有输入、选择和输出保持相同的样式，但只使用上面的标签。

Answer 1

以下代码片段修复了您的下拉列表：

/* ================== */
/* === GLOBAL CSS === */
/* ================== */

/* Input Placeholder and Select Text Size */

input[type="number"]::-webkit-input-placeholder {
  font-size: 75%;
  line-height: 1.5;
}

input[type="number"]::-moz-placeholder {
  font-size: 75%;
  line-height: 1.5;
}

input[type="number"]:-moz-placeholder {
  font-size: 75%;
  line-height: 1.5;
}

input[type="number"]:-ms-input-placeholder {
  font-size: 75%;
  line-height: 1.5;
}

select.form-select {
  font-size: 75%;
  box-sizing: border-box;
}

select.form-select,
input.reset_form {
  height: calc(1.5em + 0.75rem + 2px);
}

.form-group .row .col:first-child {
  padding-right: 0;
}

.form-group .row .col:last-child {
  width: auto;
}

.form-group {
  display: flex;
  align-items: center;
}

.form-group .row {
  flex: 1;
}

.form-group .row .col:first-child {
  flex: 1;
}

label.form-label {
  padding-top: 6px;
}

/* Set height of input boxes */

.form-control.input-rounded-start {
  height: 34px;
}

.input-group-text {
  height: 34px;
  padding: 0.375rem 0.75rem;
}




/* ================= */
/* === LOCAL CSS === */
/* ================= */


td.form-group {
  display: flex;
  align-items: center;
}

td.form-group label.form-label {
  padding-top: 6px;
}

.input-wrapper {
  display: flex;
  align-items: center;
}

.input-group {
  display: flex;
  width: 100%;
}

.input-group input {
  width: 75%;
  display: inline-block;
  vertical-align: middle;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem 0 0 0.25rem;
}

.input-group select {
  display: inline-block;
  vertical-align: middle;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #f0f0f0;
  border: 1px solid #ced4da;
  border-left: none;
  border-radius: 0 0.25rem 0.25rem 0;
}

.row-input {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.row-input .form-control {
  height: calc(1.5em + 0.75rem + 2px);
}

.input-group {
  display: flex;
  align-items: center;
  flex: 1;
}

.input-group input {
  width: 60%;
}

.input-group select {
  margin-left: -1px;
}

.output-group {
  width: 25%;
  margin-left: -1px;
}

.output-group {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  color: #555;
  font-style: italic;
}

.input-label-container {
  position: relative;
}

.label-above {
  position: absolute;
  top: -1.3em;
  font-size: 0.8em;
  opacity: 0.7;
}

<section class="container border border-primary bg_cont mb-3">
  <div class="row justify-content-center">
    <div class="col-lg-10 mx-auto">
      <div class="card shadow-sm p-3 mt-1 mb-1">
        <span></span>
        <div class="card-body">
          <div class="row mb-3 row-input">
            <div class="col-md-12">
              <label for="input" class="form-label d-none d-sm-inline">Input</label>
              <div class="input-group p-1">
                <input type="number" name="" id="" class="reset_form formCheck maxAllow form-control input-rounded-start">
                <!-- Label Needs To Go Here -->
                <select class="form-select select-input" name="unitsVelocity" id="units">
                  <option value="a">a</option>
                  <option value="b">b</option>
                  <option value="c" selected>c</option>
                </select>
                <!-- Label Needs To Go Here -->
                <div class="form-control output-group" id="value">
                  *stuff*</div>
              </div>
            </div>
          </div>
        </div>

        <!--          More stuff  -->
</section>