Html кнопки в ряд: Как сделать группу кнопок

html — Как отобразить кнопки горизонтально после тега input, который вложен в div блок?

Задать вопрос

Вопрос задан 7 лет 2 месяца назад

Изменён 7 лет 2 месяца назад

Просмотрен 384 раза

Добрый день.

Есть поле для ввода input с классом string required ctrlenter expanding, после него следом добавлены две кнопки вверх и вниз. На данный момент эти кнопки отображаются после поля ввода на следующей строке, а необходимо чтобы они шли в ряд в месте с ним. Какие стили необходимо прописать, чтобы это реализовать?

    <div>
      <div>
        <div><input display="inline" margin="0" name="blog_post[poll_attributes][poll_items_attributes][0][answer]" placeholder="Введите вариант ответа" size="50" type="text">
        </div>
    </div>
      <button display="inline" name="button" type="button">вверх</button>
      <button display="inline" name="button" type="button">вниз</button>
      <input name="blog_post[poll_attributes][poll_items_attributes][0][_destroy]" type="hidden" value="false"><a href="#" data-wrapper-class="poll_item">удалить</a>
    </div>

• html
• css
• css3

. control-group, button, input {
  display: inline-block;
}

<div>
  <div>
    <div><input display="inline" margin="0" name="blog_post[poll_attributes][poll_items_attributes][0][answer]" placeholder="Введите вариант ответа"
        size="50" type="text">
    </div>
  </div>
  <button display="inline" name="button" type="button">вверх</button>
  <button display="inline" name="button" type="button">вниз</button>
  <input name="blog_post[poll_attributes][poll_items_attributes][0][_destroy]" type="hidden" value="false"><a href="#" data-wrapper-class="poll_item">удалить</a>
</div>

Зарегистрируйтесь или войдите

Отправить без регистрации

Необходима, но никому не показывается

Отправить без регистрации

Необходима, но никому не показывается

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

button — Как расположить все элементы внутри в одну строку в HTML?

Вопрос задан 1 год 4 месяца назад

Изменён 1 год 4 месяца назад

Просмотрен 276 раз

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

<div>
<p><input type="button" value="Мои достижения"></p>
<p><input type="button" value="Связаться со мной"></p>
</div>

• html
• button

Убрать теги <p>, потому что это «параграф» и он делает перенос строки

<div>
    <input type="button" value="Мои достижения">
    <input type="button" value="Связаться со мной">
</div>

Уже сказали, что здесь не нужен <p> — фактически это лишняя обертка, которая в данном случае еще и принудительно заставляет начинаться элементы с новой строки (потому что p — блочный элемент, а input — нет).

Вообще рекомендую изучить flexbox. Он как раз нужен для расстановки и упорядочивания нескольких элементов, то есть нужен всегда и везде. Тут это будет так:

div {
  /* Назначаем div флекс-контейнером, 
  по умолчанию элементы располагаются в строку */
  display: flex;
  /* Задаем выравнивание элементов: с одинаковым расстоянием между ними */
  justify-content: space-between;
}
input {
  width: 15%;
}

<div>
  <input type="button" value="Мои достижения">
  <input type="button" value="Связаться со мной">
  <input type="button" value="Связаться со мной">
  <input type="button" value="Связаться со мной">
  <input type="button" value="Связаться со мной">
</div>

Зарегистрируйтесь или войдите

Отправить без регистрации

Необходима, но никому не показывается

Отправить без регистрации

Необходима, но никому не показывается

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

Как создать группу кнопок

❮ Назад Далее ❯

Узнайте, как создать «группу кнопок» с помощью CSS.

Горизонтальные группы кнопок

Сгруппируйте ряд кнопок вместе на одной строке в группу кнопок:

Попробуйте сами »

Как создать группу кнопок

Шаг 1) Добавьте HTML:

Шаг 2) Добавьте CSS:

Пример

.btn-group button:not(:last-child) {
  правая граница: нет; /* Предотвращение двойных границ */
}

/* Очистка плавающих элементов (взлом Clearfix) */
. btn-group:after {
содержание: «»;

/* Добавить цвет фона при наведении */
.btn-group button:hover {
  background-color: #3e8e41;
}

Группа кнопок по ширине/ширине:

Пример