如何在div顶部的输入中对齐文本

问题描述

将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,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,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>

用输入替换类别为top的div时，尽管边框仍正确对齐，但文本偏移了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,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>

我不能全力以赴。这里有人来解释它并建议如何解决这个问题？

解决方法

发生这种情况的原因是如何处理输入。输入元素内的文本字段经过拉伸以适合框的大小。在这种情况下为34px。因此，解决方法是增加div的行高以匹配输入的34px。

setTimeout(nextBatch,0)

.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,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,1);
      color: #c8c8c8;
      margin:0;
}

,

如何解决它：

.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,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,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。

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

,

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

我还添加了一个字体大小并隐藏了第二个框，以便您可以移动底层的顶部位置以与顶部的文本匹配。

这可能不是最好的方法，但它可行。

.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,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,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>