如何在 CSS 中创建与较大文字宽度相同的列？

Question

“等宽”类的文字必须与最大的文字宽度相同。如果无法在 css 中完成，请使用纯 javascript。

.field {display: flex;}

<fieldset>
  <div class="field">
      <label>
          <span class="same-width">Name</span>
          <input name="nome" placeholder="Energy">
      </label>
      <div class="tooltip">
          <span>?</span>
      </div>
  </div>
  <div class="field">
      <label>
          <span class="same-width">Drop down selection</span>
          <select required="" name="dropdown">
              <option value="">-- please select --</option>
              <option value="o1">Option 1</option>
              <option value="o2">Option 2</option>
              <option value="o3">Option 3</option>
          </select>
      </label>
      <div class="tooltip help">
          <span>?</span>
      </div>
  </div>
  <div class="field">
      <label>
          <span class="same-width">Checkbox</span>
          <span><input type="checkbox">
              I agree</span>
      </label>
  </div>
</fieldset>

Answer 1

一种选择是使用网格布局，将标签放在一列中，将输入放在另一列中。有很多配置网格的方法。下面只是一种方法。您可以在 MDN 上阅读不同的网格相关属性和使用网格。

.field {display: flex;}
label {display: contents;}

<fieldset style="display: grid; grid-template-columns: repeat(3, auto);">
      <label>
          <span class="same-width">Name</span>
          <input name="nome" placeholder="Energy">
      </label>
      <div class="tooltip">
          <span>?</span>
      </div>
      <label>
          <span class="same-width">Drop down selection</span>
          <select required="" name="dropdown">
              <option value="">-- please select --</option>
              <option value="o1">Option 1</option>
              <option value="o2">Option 2</option>
              <option value="o3">Option 3</option>
          </select>
      </label>
      <div class="tooltip help">
          <span>?</span>
      </div>
  </div>
      <label>
          <span class="same-width">Checkbox</span>
          <span><input type="checkbox">
              I agree</span>
      </label>
</fieldset>

Answer 2

使用

<table>

td {padding: 5px 10px;}
img {width: 14px; position: relative; top: 1px;}

<table>
  <tr>
    <td>Name
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Blue_question_mark_icon.svg/200px-Blue_question_mark_icon.svg.png" title="name-tooltip-here">
    </td>
    <td><input name="nome" placeholder="Energy"></td>
  </tr>
  <tr>
    <td>Drop down selection
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Blue_question_mark_icon.svg/200px-Blue_question_mark_icon.svg.png" title="dropdown-tooltip-here">
    </td>
    <td>
      <select required="" name="dropdown">
        <option value="">-- please select --</option>
        <option value="o1">Option 1</option>
        <option value="o2">Option 2</option>
        <option value="o3">Option 3</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Checkbox
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Blue_question_mark_icon.svg/200px-Blue_question_mark_icon.svg.png" title="checkbox-tooltip-here">
    </td>
    <td><input type="checkbox"> I agree</td>
  </tr>
 </table>

Answer 3

如果您知道“最大的文字”（即最长的文本）的内容，您可以检查其近似宽度并将其作为

min-width

应用于

.same-width

类的css规则（另外你需要添加

display: inline-block

，因为

span

默认情况下是内联元素，否则将忽略宽度设置）：

.field {
  display: flex;
}

.same-width {
  display: inline-block;
  min-width: 140px;
}

<fieldset>
  <div class="field">
    <label>
          <span class="same-width">Name</span>
          <input name="nome" placeholder="Energy">
      </label>
    <div class="tooltip">
      <span>?</span>
    </div>
  </div>
  <div class="field">
    <label>
          <span class="same-width">Drop down selection</span>
          <select required="" name="dropdown">
              <option value="">-- please select --</option>
              <option value="o1">Option 1</option>
              <option value="o2">Option 2</option>
              <option value="o3">Option 3</option>
          </select>
      </label>
    <div class="tooltip help">
      <span>?</span>
    </div>
  </div>
  <div class="field">
    <label>
          <span class="same-width">Checkbox</span>
          <span><input type="checkbox">
              I agree</span>
      </label>
  </div>
</fieldset>