使按钮、选择和输入都具有相同的高度

Question

我正在尝试使所有表单元素具有相同的高度。通常我会为每个项目设置一个高度，工作很好！但是与我一起工作的开发人员坚持我对按钮使用填充，以防它们需要换行，这样文本就不会被截断……通过争论，这也是一个需要解决的问题，但无论如何。 ..

所以我有这个 CodePen 展示了我所有的风格。我已经包含了所有 CSS 以防万一我遗漏了任何被继承的内容。我已经设法通过使用相同的 font-size、padding 和 line-height.

使它们中的大多数具有相同的高度

https://codepen.io/moy/pen/pVeOyQ

问题是其中一个按钮没有 border 而其他所有按钮都有，所以它偏离了几个像素。我以为 border-box 会解决这个问题，但显然不是！

我也可以为该按钮添加边框，并始终确保它与背景颜色相同 - 但这有点麻烦。这是唯一的方法吗？

我知道这是一个 minor/simple 问题，但我只想在做出决定之前获得一些反馈。

我已经包含了 CodePen，因为我无法嵌入所有 CSS，因为它超出了限制。此外，由于没有足够的空间，我无法在嵌入代码中水平内联所有元素。

Answer 1

如何为所有元素设置一个最小高度？结合 box-sizing: border-box;

Answer 2

I could add a border to that button as well and always make sure it's the same colour as the background - but that's a bit of the pain. Is it the only way though?

除此之外，您还可以添加透明边框，如下面的代码片段所示。

input, select, button {
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;

    padding: 15px;
    border: 1px solid #1111;
    margin: 0;
  }

  #transparent-border {
    border: 1px solid transparent;
  }

  #no-border {
    border: none;
  }

<p>How it looks <i>with</i> the transparent border</p>

<input type="text" name="" placeholder="Input field">

<select class="" name="">
  <option value="Select">Select field</option>
</select>

<button type="button" name="button">Button</button>

<button id="transparent-border" type="button" name="button">Button with transparent border</button>

<p>How it looks <i>without</i> the transparent border</p>

<button type="button" name="button">Border</button>

<button type="button" id="no-border" name="button">No border</button>

<p>Comparison</p>

<button type="button" id="no-border" name="button">No border</button>

<button id="transparent-border" type="button" name="button">Button with transparent border</button>

使按钮、选择和输入都具有相同的高度

Make buttons, selects and inputs all the same height

html

css

border-box