Блог

Главная - Вопросы по программированию - как сделать так, чтобы два элемента располагались прямо в двух рядах подряд?

как сделать так, чтобы два элемента располагались прямо в двух рядах подряд?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я застрял с проблемой. Я работаю над веб-сайтом, и я хочу оформить ввод с меткой, чтобы она плавала с правой стороны, а метка оставалась поверх ввода в этой строке, но элементы остаются такими, как показано на рисунке ниже.

изображение

это то, что я делал до сих пор:

 <h2>Pacients Info</h2>
        <button className="addNewPacient" onClick={showModal}>Create</button>
        <button className="addNewPacient">Read</button>
        <button className="addNewPacient">Update</button>
        <button className="addNewPacient">Delete</button>

        <label for="rowsNo"><b>Rows no.</b></label>
        <input 
            type="number" 
            placeholder="Rows no"
            name="rowsNo"
            value="10000"
            onChange={e => onInputChange(e)}
        />


label[for="rowsNo"],
input[name="rowsNo"] {
    float: right;
}

input[name="rowsNo"] {
    width: 100px;
}

Комментарии:

1. Что вы сделали до сих пор? Можете ли вы показать нам свой код?

2. Пожалуйста, добавьте немного кода.

3. Я добавил код.

4. Вы должны посмотреть flex box для CSS. Ваш сайт будет выглядеть испорченным у кого-то, у кого другое разрешение экрана или соотношение сторон. Но, по сути, вы должны обернуть эти два элемента в div. У этого div должен быть дисплей: сгибайте и настраивайте его оттуда.

Ответ №1:

оберните ввод и метку внутри некоторого контейнера div и добавьте к нему стили примерно так

 <div className="some-class-name">
  <label for="rowsNo"><b>Rows no.</b></label>
  <input 
      type="number" 
      placeholder="Rows no"
      name="rowsNo"
      value="10000"
      onChange={e => onInputChange(e)}
  />
</div>

Обновите CSS до

 .some-class-name {
  display: flex;
  flex-direction: column;
  float: right;
  min-width: 100px;
}

input[name="rowsNo"] {
  width: 100px;
}

Вместо использования float рекомендую использовать свойство flex CSS, это действительно упрощает.
Вы можете перейти по этой ссылке для обзора https://css-tricks.com/snippets/css/a-guide-to-flexbox /

Метки: ,