0

Не двигается input text от радиокнопок

.choice {
    display: flex;
    align-items: center;
}

.multiplechoice {
    position: static;
}

input[type=radio] {
    right: 0;
    margin-left: var(--margin-left-right);
    margin-right: var(--margin-left-right);
    cursor: pointer;
    height: 16px;
    width: 16px;
}

input[type=radio]::before {
    content: '';
    position: absolute;
    background-color: var(--color-light-apricot);
    border: 2px solid var(--color-blue);
}

input[type=radio]:checked::after {
    content: '';
    position: absolute;
    background-color: var(--color-blue);
    visibility: visible;
}

label {
    font-size: var(--font-size-label);
}

.scores {
    margin-left: var(--margin-left-right);
    margin-right: var(--margin-left-right);
}
<div className={s.choice}>
    <div className={s.multiplechoice}>
    <label>
        <input name="radiobutton" type="radio" value="radiobutton" />
        ...</label><br />
        <label><input name="radiobutton" type="radio" value="radiobutton" />...</label>
    </div>
    <input type="text" placeholder="Score" className={s.scores} />
</div>

4
  • самый простой вариант - дать label или input (в зависимости от чего Вы делаете отступ) display: inline-block, т.к. и label и input - инлайновые элементы
    – Meth0d
    6 мая 2022 в 7:41
  • @Meth0d не помогло. Подвинулось только, когда от label написала margin-right, но на нужное количество не подвинулось, а просто слетел текст вниз у радиокнопки 6 мая 2022 в 7:47
  • .scores { position: absolute; margin-left: 170px; margin-right: 15px; } помогло это, но это не лучший вариант 6 мая 2022 в 8:57
  • расскажите, пожалуйста, какое отношение имеет ваш вопрос к node.js? 6 мая 2022 в 16:18

2 ответа 2

0

может так?

input[type="text"] {
   padding: 10px 0;
   margin: 15px 0;
}
1
  • тоже почему-то не помогло( 6 мая 2022 в 8:27
0
  1. В сниппет вообще-то надо вставлять рабочий код, а не кусок с синтаксисом неизвестного фреймворка и с необъявленными переменными (поэтому ваши стиля не применяются к элементам в сниппете - классов нет, переменные неизвестны). А еще надо удалять то, что к вопросу не относится.
  2. Вопрос надо формулировать так, чтобы было понятно, что вы хотите. Куда не двигается? Как не двигается? Я, например, глядя на заголовок вопроса, первым делом подумал об анимации.
  3. Ну и, собственно, все прекрасно сдвигается - вычистил ваш код и добавил цвета для наглядности. Инпут на расстоянии от лейблов и радиокнопок. Если не то, обновите, пожалуйста вопрос, чтобы было понятно, что вам надо:

.choice {
  display: flex;
  align-items: center;
  background: pink;
}

.multiplechoice {
  position: static;
  background: yellow;
}

input[type=radio] {
  right: 0;
  margin-left: 1em;
  margin-right: 1em;
  cursor: pointer;
  height: 16px;
  width: 16px;
  background: green;
}

label {
  font-size: 14px;
  background: wheat;
}

.scores {
  margin-left: 5em;
  margin-right: 1em;
}
<div class="choice">
  <div class="multiplechoice">
    <label><input name="radiobutton" type="radio" value="radiobutton" />...</label>
    <br />
    <label><input name="radiobutton" type="radio" value="radiobutton" />...</label>
  </div>
  <input type="text" placeholder="Score" class="scores" />
</div>

1
  • извините, пожалуйста, я понимаю, что я новичок здесь, но не могли бы вы быть чуть вежливее? 8 мая 2022 в 9:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.