Справка по правому краю

Question

Я пытаюсь выровнять часть метки для поля ввода текста.

Здесь - примерная скрипка.

<div class="row">
  <div class="input-field col s6">
    <input placeholder="Placeholder" id="first_name" type="text" class="validate">
    <label for="first_name">First Name <span class="right-align">Top Right</span></label>
  </div>
</div>

Моя цель состоит в том, чтобы текст «Вверху справа» находился в правом верхнем углу ввода. Я попытался добавить right-align помощник CSS, но он ничего не сделал.

Я попытался добавить style="float: right;", который работает , но текст не совсем выровнен вправо

Есть ли способ сделать это идеально выровненным по правому краю поля ввода?

Answer 1

Я действительно не фанат чрезмерного использования position: absolute для решения проблем. Использование этого может вызвать проблемы с производительностью, поскольку браузер должен создать новый элемент стека и вывести наизнанку . Тем более, что он уже в абсолютном выражении, так что теперь у вас будет 3 элемента стека, когда на самом деле это сделать, ни один не нужен .

Менее грязный (без позиции, худший вариант) Исправление:

.abcd {
  float: right;
}
label {
  padding-right: 1.50rem;
}

https://jsfiddle.net/f4036zmg/

Почему это работает: метка позиционируется абсолютно, поэтому она не учитывает заполнение элемента контейнера (.75rem). Чтобы правильно выровнять левую сторону, он имеет left: .75rem, что означает, что правая сторона теперь 1.5rem направо, потому что это width: 100%. Простое заполнение метки заставит поплавок перемещаться в пределах области с метками.

Дайте мне знать, если вы хотите, чтобы все это работало без должностей, это довольно легко. (Однако похоже, что materialize.min.css делает эту работу за вас, очень уродливо).

---

Полуочистка (без позиции, опция ok) Исправление:

.abcd {
  float: right;
}
input[type=text].validate+label {
  width: auto;
  right: .75rem;
}

Здесь мы переопределяем materialize.min.css (возможно, это не очень хороший вариант, я не знаю). Мы сбрасываем width: auto, чтобы right работал, и, как и прежде, для этого нужно заполнить .75rem

https://jsfiddle.net/gL7fhx2q/

---

Чистое исправление:

Требуемые изменения HTML:

<label for="first_name">
  <span class="">First Name</span>
  <span class="tar">Top Right</span>
</label>

CSS:

.input-field.col label {
  left: 0;
  padding: 0 .75rem;
  display: flex;
}
.input-field.col label > span {
  flex: 1 0 auto;
}
.tar {
  text-align: right;
}

https://jsfiddle.net/7bw2zghr/

Снова переопределение materialize.min.css, однако это не должно вызывать проблем для других проектов. Сбросьте левую спину в правильное положение left:0 и добавьте заполнение, как ввод padding: 0 .75rem. Теперь метка правильно соответствует его родным братьям. Измените отображение метки на гибкий контейнер и оберните оба текста так, чтобы они были гибкими элементами. Установите пропорционально растущие элементы, а затем правильно установите текст элемента сгиба вправо.

Answer 2

Когда я проверяю его в Chrome, происходит много сумасшедших CSS. Где вы взяли этот CSS? По какой-то причине ваша метка расположена на 10,5 пикселей вправо, что отбрасывает ее. Попробуйте этот CSS ...

.right-align {
  float: right;
}
label {
  left: 0 !important;
  right: 0 !important;
}
.input-field{
  padding: 0 !important;
}

Редактировать: теперь я вижу, что вы получили его от Материализации. Я не очень знаком с этим, но метка, расположенная на 10,5 пикселей вправо, а .input-field 's padding-left и padding-right, заставляет диапазон смотреть слишком далеко вправо по сравнению с вводом. Вы должны удалить эту прокладку и убедиться, что метка расположена с left: 0. Возможно, было бы лучше создать собственные классы для вашей метки и для диапазона в метке, но концепции, которые я здесь показал, будут работать.

Answer 3

Вы можете уменьшить ширину метки до 91%, поскольку вы используете абсолютное положение (вверху, слева), чтобы отрегулировать его местоположение и добавить число с плавающей точкой вправо к диапазону

input[type=text].validate+label {
  width: 91%;
}

.right-align {
  float: right;
}

Answer 4

Вы можете просто добавить абсолютную позицию в класс и назначить этот класс элементу, который вы хотите выровнять справа от ввода. Вам не нужно ничего настраивать. .right-align { position: absolute; }

Answer 5

https://jsfiddle.net/mL19ybnt/15/

.right-align {
  position: absolute;
  right: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>


<div class="row">
  <div class="input-field col s6">
    <input placeholder="Placeholder" id="first_name" type="text" class="validate">
    <label for="first_name">First Name <span class="right-align">Top Right</span></label>
  </div>
  
  <div class="input-field col s3">
    <input placeholder="Placeholder" id="first_name" type="text" class="validate">
    <label for="first_name">First Name <span class="right-align">Top Right</span></label>
  </div>
</div>

вы можете использовать position: absolute;, а затем добавить любое поле, чтобы выровнять его правильно например

.right-align {
  position: absolute;
  right: 25px;
}