Как я могу центрировать входное значение и предыдущий текст по горизонтали - PullRequest
Новая
       7

Как я могу центрировать входное значение и предыдущий текст по горизонтали

0 голосов
/ 03 июля 2018

Извините за мой плохой английский. У меня есть диапазон (например, $) и ввод, когда пользователь вводит что-то, диапазон и ввод всегда должны оставаться по центру по горизонтали. Я хочу, чтобы это выглядело как строка 1 в коде ниже. Но на самом деле я могу просто закодировать это как строку 2.

Я хочу решение, будет лучше без js. Я читал об этой статье ( поле ввода текста HTML с символом валюты ), но это не решает мою проблему, поскольку ничего не центрирует. 

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

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Ваш код выравнивает по центру как знак $, так и ввод текста. Проблема в том, что вы не указали ширину поля ввода. Вы можете исправить это, указав ширину поля ввода.

Надеюсь, это поможет! 

.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>
0 голосов
/ 03 июля 2018

Вы можете просто вставить $ в значение, и оно будет двигаться вместе со значением. 

.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

...