将 select 和 input 元素中的文本垂直对齐到顶部

Posted 2023-03-05

【中文标题】将 select 和 input 元素中的文本垂直对齐到顶部

【英文标题】：Vertically align text in select and input elements to top

【发布时间】：2021-10-14 00:32:42

【问题描述】：

我有一些高度为 100% 的 select 和 input 元素（输入必须为 100% 高度！），以便它们适合表格单元格。这些输入可以是任何高度，我希望文本垂直对齐到顶部，以便与第 2 列匹配。

这可以用纯 CSS 实现吗？如果没有，是否有任何好的解决方法可以让我继续使用香草 html 输入？我想避免使用 javascript，但如果这是唯一的选择，请不要使用它。

请注意，我不关心 IE 或 Safari 支持。

table 
  height: 1px;
  table-layout: fixed;
  border-collapse: collapse;


td 
  position: relative;
  height: 100%;
  border: 1px solid grey;
  padding: 0;


input,
select 
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;

<table>
  <colgroup>
    <col style="width: 50%">
  </colgroup>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <input type="text" value="Should be top aligned">
      </td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
    </tr>

    <tr>
      <td>
        <select>
          <option>Should be top aligned</option>
          <option>Item 2</option>
        </select>
      </td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
    </tr>
  </tbody>

</table>

附：这不是重复的，因为我的输入具有动态高度，所以我不能使用这里提到的填充解决方案css align text in input vertically to top

【问题讨论】：

您的选择和输入会占用 td 的所有高度。

是的，应该是这样，但我试图让输入中的文本与顶部对齐

【参考方案1】：

我认为你不能在纯 CSS 中做到这一点。垂直对齐输入元素很痛苦。

我编写了一个小脚本来将 padding-bottom 的值设置为您输入的高度，以便它保持在顶部。这不是理想的方式，但确实有效！

alignAllInputs()
    window.onresize = () => 
        alignAllInputs()
    
    function alignAllInputs() 
        let a = document.querySelectorAll('tr td:first-child input')
        a.forEach((item) => 
            item.style.paddingBottom = 0 + 'px'
            item.style.paddingBottom = (a[0].offsetHeight - 20) + 'px'
        )
    

table 
    height: 1px;
    table-layout: fixed;
    border-collapse: collapse;


td 
    position: relative;
    border: 1px solid grey;
    padding: 0;


input,
select 
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: none;

<table>
    <colgroup>
        <col style="width: 50%">
    </colgroup>
    <thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>
            <input type="text" value="Should be top aligned">
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
    </tr>

    <tr>
        <td>
            <select>
                <option>Should be top aligned</option>
                <option>Item 2</option>
            </select>
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
    </tr>
    </tbody>

</table>

【讨论】：

感谢您的回答，不幸的是，这并不能解决问题，因为我的输入必须保持 100% 的高度，或者至少看起来/表现得像他们一样。

我用一点 JavaScript 编辑了我的答案。似乎工作，但我不得不承认，它一点也不花哨！ @马特