Question

更新我认为最好的解决方案是Timothy Lee提到的解决方案。实质上，将vertical-align: top添加到<div>代码。

标签，输入和div走进酒吧......

这些元素都具有以下样式：

box-sizing: border-box;
height: 40px;
line-height: 40px;

div有一个边框并包含一个锚标记。目标是排列div和input边框，但似乎div比input高1px。

参见codepen例如

https://codepen.io/gosusheep/pen/PEQLOp

关于如何解决这个问题的想法？我大部分时间都在处理边距和填充以及样式锚标记，但还没有找到解决方案。

感谢您的时间。

编辑：

P.S。我花了很多时间用谷歌搜索并查看stackoverflow的解决方案（这是我发现“行高”解释的地方），但仍然无法解决它。

EDIT2：

HTML：

<div class="my-container">
  <label for="text">Label</label>
  <input type="text" id="text" />
  <div class="my-link">
    <a href="#">suh dud</a>
  </div>
</div>

CSS：

.my-container {
  margin: 1rem;
}

input, label {
  box-sizing: border-box;
  height: 40px;
}

.my-link {
  height: 40px;
  display: inline-block;
  box-sizing: border-box;
  border: 1px black solid;
  line-height: 40px;
  vertical-align: top;
}

.my-link > a {
  line-height: 40px;
}

Answer 1

最简单的方法是，你可以删除div

<div class="my-container">
  <label for="text">Label</label>
  <input type="text" id="text" />
  <a class="my-link" href="#">suh dud</a>
</div>

并添加vertical-align

.my-link {
  vertical-align:top;
  height: 40px;
  display: inline-block;
  box-sizing: border-box;
  border: 1px black solid;
  line-height: 40px;}

Answer 2

因为输入元素具有插入边框而您的按钮具有实心边框，所以在第二个中，实体元素构成外部边框。这里有两个不同的边框选项＆gt;＆gt;＆gt;

border: 1px solid #000;
border: 1px inset #000;

内联<input />和<div>不垂直对齐，但高度相同

2 个答案: