时间戳

首页 > 解决方案 > 输入高度略大于链接

html - 输入高度略大于链接

问题描述

考虑以下示例

https://jsfiddle.net/gq5bru8d/1/

 

* {
  box-sizing: border-box; }

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem; }

a {
  text-decoration: none; }

  
<input type="text" placeholder="Input">
<a href="#">Anchor</a>

尽管输入和锚标记都具有相同font-size的line-height、padding和border，但输入的高度似乎比锚标记大 1px。为什么会这样，你怎么能做到让它们都具有相同的尺寸？

标签： htmlcss

解决方案

将它们包装在一个 flex div 中。

 

* {
  box-sizing: border-box; }

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem; }

a {
  text-decoration: none;
  margin-left: 5px;
 }

  
<div style="display: flex;">
<input type="text" placeholder="Input">
<a href="#">Anchor</a>
</div>

另一种解决方案。将此样式添加到两个元素font: 13.3333px Arial

 

* {
  box-sizing: border-box; }

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem;
  font: 13.3333px Arial;

 }

a {
  text-decoration: none;
  margin-left: 5px;
 }

  
<input type="text" placeholder="Input">
<a href="#">Anchor</a>

推荐阅读