Question

我想将同一个类应用于两个不同的元素，并注意到每个元素（或至少它们的高度）周围的填充是不同的。

这是小提琴 - https://jsfiddle.net/v9vnru0j/1/。如何使两个元素的高度相同（我将其解释为填充适用于两者）？

＆＃13;

.btn {
  font-family: "Montserrat", "HelveticaNeue", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 20px;
  font-size: 0.8125em;
  text-rendering: optimizeLegibility;
  max-width: 100%;
  margin: 0;
  line-height: 1.42;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  border: 1px solid transparent;
  -moz-user-select: none;
  -moz-appearance: none;
  border-radius: 0;
  background-color: #1c1d1d;
  color: #fff;
  text-indent: 0rem;
}

＆＃13;

 <span class="buttonContainer"><a class="btn" data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>

＆＃13;

Answer 1

两个按钮中的所有样式都位于btn。但是，在您的某个按钮中，您的btn正在href标记内进行处理，并且未被点击。

我会继续你的HTML

<span class="btn"><a data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="btn"><input type="submit" name="commit" value="Save" method="put"></span>

如果您碰巧需要其他课程，请将其设置为

<span class="buttonContainer btn">

这应该可以解决问题。

Answer 2

您需要将line-height更改为1。

Answer 3

这是因为默认情况下链接和输入都是updated_at。

但是，输入是替换元素，这使它们更接近inline s。

因此，解决方案是

inline-block

.btn {
  display: inline-block;
}

.btn {
  display: inline-block;
  font-family: "Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 20px;
  font-size: 0.8125em;
  text-rendering: optimizeLegibility;
  max-width: 100%;
  margin: 0;
  line-height: 1.42;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  border: 1px solid transparent;
  -moz-user-select: none;
  -moz-appearance: none;
  border-radius: 0;
  background-color: #1c1d1d;
  color: #fff;
  text-indent: 0rem;
}
.buttonContainer *:hover {
  margin: 0 0 0px 0;
  text-rendering: optimizeLegibility;
  cursor: pointer;
  background-color: silver;
}

但在Firefox上仍有2px的差异。可能是输入的值放在内部包装器中。您可以指定<span class="buttonContainer"><a class="btn" data-no-turbolink="true" href="/my_objects/index">Cancel</a></span> <span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>来解决此问题。

height

.btn {
  display: inline-block;
  height: 1.42em; /* Same as line-height */
  box-sizing: content-box;
}

.btn {
  display: inline-block;
  height: 1.42em;
  box-sizing: content-box;
  font-family: "Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 20px;
  font-size: 0.8125em;
  text-rendering: optimizeLegibility;
  max-width: 100%;
  margin: 0;
  line-height: 1.42;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  border: 1px solid transparent;
  -moz-user-select: none;
  -moz-appearance: none;
  border-radius: 0;
  background-color: #1c1d1d;
  color: #fff;
  text-indent: 0rem;
}
.buttonContainer *:hover {
  margin: 0 0 0px 0;
  text-rendering: optimizeLegibility;
  cursor: pointer;
  background-color: silver;
}

为什么填充不能同等地应用于两个元素？

3 个答案: