如何在 div 之上对齐输入中的文本

Question

将 div 放在另一个 div 后面时，bot div 元素中的文本对齐。

.wrapper {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-size: 24px;
  font-family: Verdana;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  z-index: 2;
  position: relative;
}

.underlayer {
  top: -48px;
  z-index: 1;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
}

<div class="wrapper">
  <div type="text" class="box top">20-123</div>
  <div class="box underlayer">20-123-20</div>
</div>

当 div 和 class top 替换为输入时，文本偏移 1px，但边框仍然正确对齐。

.wrapper {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-family: Verdana;
  font-size: 24px;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  z-index: 2;
  position: relative;
}

.underlayer {
  top: -48px;
  z-index: 1;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
}

<div class="wrapper">
  <input type="text" value="20-123" class="box top">
  <div class="box underlayer">20-123-20</div>
</div>

我无法理解它。有人在这里解释它并建议如何解决这个问题吗？

Answer 1

解决方法在这里：

.wrapper {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-size: 24px;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  z-index: 2;
  position: relative;
}

.underlayer {
  top: -48px;
  z-index: 1;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
   display: block;
   tabindex: -1;
}

<div class="wrapper">
  <input type="text" value="20-123" class="box top">
  <input class="box underlayer" value="20-123-20">
</div>

您将 underlayer 从 div 更改为 input。它将第二个 div 的字体更改为输入使用的字体。因为 underlayer 比 z-index 低，它永远不会被用户选择，不会造成任何危险。您还将第二个输入的显示设置为 block.

不幸的是，我不知道它最初发生的原因，所以我无法解释。

Answer 2

您的字体有问题。底层有一种字体，另一种字体有。

我还添加了一个 font-size 并隐藏了你的第二个框，这样你就可以移动底层的顶部位置以匹配顶部的文本。

这可能不是最好的方法，但它确实有效。

.wrapper {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-size: 24px;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  font-family: sans-serif;
  z-index: 2;
  position: relative;
}

.underlayer {
  font-family: sans-serif;
  font-size: 24px; 
  top: -44px;
  left: 1px;
  z-index: 1;
  border: 0px solid #cccccc;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
}

<div class="wrapper">
  <input type="text" value="20-123" class="box top">
  <div class="box underlayer">20-123-20</div>
</div>

Answer 3

发生这种情况是因为输入的处理方式。 input-element 中的文本字段被拉伸以适合框大小。在本例中为 34px。所以解决方法是增加 div 的 line-height 以匹配输入的 34px。

.wrapper {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-family: Verdana!important;
  font-size: 24px;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  z-index: 2;
  position: relative;
}

.underlayer {
  top: -48px;
  line-height: 34px;
  z-index: 1;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
}

<div class="wrapper">
  <input type="text" value="20-123" class="box top">
  <div class="box underlayer">20-123-20</div>
</div>

如何在 div 之上对齐输入中的文本

How to align text in input on top of div

html

css

z-index