Question

我试图让所有表单元素的高度相同。通常我只是在每个项目上设置一个高度，而且工作很好！但我正在使用的开发人员坚持认为我使用填充按钮需要包装，因此文本不会被切断...通过参数将是＆＃39; sa问题也需要解决，但无论如何......

所以我有这个CodePen显示我的所有样式。我已经包含了所有的CSS，只是因为我遗漏了任何被继承的东西。通过使用相同的font-size，padding和line-height，我设法让大部分人都达到相同的高度。

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

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

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

我知道这是一个轻微/简单的问题，但我只想在做出决定之前得到一些反馈。

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

Answer 1

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

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

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

Answer 2

如何为所有元素设置最小高度？与box-sizing相结合：border-box;

制作按钮，选择和输入所有相同的高度

2 个答案: