Question

对不起，我英语不好。我有一个跨度（如$）和一个输入，当用户输入某些内容时，跨度和输入应始终保持水平居中。我希望它看起来像下面的代码中的第1行。但实际上，我可以像第2行一样对它进行编码。

我想要一个解决方案，没有js会更好。我已经读过这篇文章（HTML text input field with currency symbol），但是它没有解决我的问题，因为它没有使任何内容居中。

.main{
  display:flex;
  align-items:center;
  justify-content:center;
}
.this-should-be-input{
  font-size:36px;
}
.the-input{
  border:none;
  text-align:center;
  
}

<div class="main">
    <span style="font-size:24px;">$</span>
    <div class="this-should-be-input">
        12345
    </div>
</div>
<div class="main">
    <span style="font-size:24px;">$</span>
    <input class="this-should-be-input the-input" value="12345"/>     
</div>

Answer 1

您只需将$放入值中，它将随值一起移动。

.main{
  display:flex;
  align-items:center;
  justify-content:center;
}
.this-should-be-input{
  font-size:36px;
}
.the-input{
  border:none;
  text-align:center;
  
}

<div class="main">
    <span style="font-size:24px;">$</span>
    <div class="this-should-be-input">
        12345
    </div>
</div>
<div class="main">
    <input class="this-should-be-input the-input" value="$12345"/>     
</div>

但是，如果您希望永久存在，就需要没有javascript的输入字段居中

Answer 2

您的代码将$符号和文本输入居中对齐。问题是您没有为输入字段指定任何宽度。您可以通过在输入字段中指定宽度来解决此问题。

希望有帮助！

.main{
  display:flex;
  align-items:center;
  justify-content:center;
}
.this-should-be-input{
  font-size:36px;
}
.the-input{
  border:none;
  text-align:center;
  width:24%;
}

<div class="main">
    <span style="font-size:24px;">$</span>
    <div class="this-should-be-input">
        12345
    </div>
</div>
<div class="main">
    <span style="font-size:24px;">$</span>
    <input class="this-should-be-input the-input" value="12345"/>     
</div>

如何将输入值和上一个文本水平居中

2 个答案: