[Помогите] Форма со "звездочкой"

AlexGood · 3 апр 2018

Кто предложит лучший вариант или более правильный создания такой формы:
Что-то не получается залить картинку. Вот скрин: http://joxi.ru/Dr8E800h4B7wBm
HTML:
<form class="registration" action="#" method="GET">
                    <ul>
                        <li>
                            <span class="star">Фамилия:</span><input type="text" required>
                        </li>
                        <li>
                            <span class="star">Имя:</span><input type="text" required>
                        </li>
                    </ul>
                </form>
У меня получилась вот такая ерунда: https://jsfiddle.net/mjcvxy0m/5/#&togetherjs=3rE9fswkQL
Только с инпутами непонятки так как не на всю длину из-за разной длины текста со звездочкой
Как лучше это все обыграть?

iga · 3 апр 2018

Если для .registration [type="text"], .registration [type="email"] сделать правое выравнивание типа float: right?

AlexGood · 4 апр 2018

Ну да так более похоже на правду: http://joxi.ru/nAy8VEEfYJ1Kv2

AlexGood · 5 апр 2018

Но проблема, как это все сделать адаптивным? Или универсальным что ли. Чтобы не перепрописывать по 100 раз стили на разных разрешениях.

--- Добавлено, 5 апр 2018 ---

Попробовал вот такой вариант, при помощи flex контейнеров:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  font-size: 30px;
}

.star:after {
    content: '*';
    color: red;
}

</style>
</head>
<body>

<div class="flex-container">
  <div><span class="star">Имя:</span></div>
 <div style="width:100%;"><input style="width:100%;" type="text" required></div><br/>
</div>

</body>
</html>

[Помогите] Форма со "звездочкой"

AlexGood

iga

AlexGood

AlexGood