0

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

所以我有这个 CodePen 展示了我所有的风格。我已经包含了所有的 CSS，以防万一我错过了任何被继承的东西。font-size通过使用相同的,padding和，我设法使它们中的大多数具有相同的高度line-height。

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

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

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

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

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

4

2 回答 2

2

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

取而代之的是，您可以添加一个透明边框，如下面的代码片段所示。

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>

于 2018-05-01T09:19:08.977 回答
0

为所有元素设置最小高度怎么样？结合box-sizing：border-box；

于 2018-05-01T08:41:12.753 回答