html — Как отобразить кнопки горизонтально после тега input, который вложен в div блок?
Задать вопрос
Вопрос задан
Изменён 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>
Зарегистрируйтесь или войдите
Регистрация через GoogleОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
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 месяца назад
Просмотрен 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>
Зарегистрируйтесь или войдите
Регистрация через Google Регистрация через Facebook Регистрация через почтуОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
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:
9001 9 ПримерШаг 2) Добавьте CSS:
Пример
кнопка .btn-group {background-color: #04AA6D; /* Зеленый фон */
граница: 1 пиксель сплошной зеленый; /* Зеленая рамка */
цвет: белый; /* Белый текст */
padding: 10px 24 пикселя; /* Немного заполнения */
cursor: pointer; /* Значок указателя/руки */
float: left; /* Поплавок кнопки рядом */
}
.btn-group button:not(:last-child) {
правая граница: нет; /* Предотвращение двойных границ */
}
/* Очистка плавающих элементов (взлом Clearfix) */
. btn-group:after {
содержание: «»;
дисплей: стол;
}
/* Добавить цвет фона при наведении */
.btn-group button:hover {
background-color: #3e8e41;
}
Группа кнопок по ширине/ширине:
Пример
<дел>
<кнопка >Яблоко
Совет: Перейдите к нашему учебнику по кнопкам CSS, чтобы узнать подробнее о том, как стилизовать кнопки.
❮ Предыдущий Далее ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
9000 3
Лучшие ссылки
Справочник по HTMLСправочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
css — Как разместить три кнопки в одном ряду слева, посередине и справа в контейнере с изменяемой шириной?
спросил
Изменено 9 лет, 11 месяцев назад
Просмотрено 50 тысяч раз
Я использую МЕНЬШЕ
в среде Twitter Bootstrap, но я бы также принял прямые ответы CSS
.
| Емкость для жидкости | | | | [Кнопка1] [Кнопка2] [Кнопка3] | | |
Другая ширина:
| Емкость для жидкости | | | | [Кнопка1] [Кнопка2] [Кнопка3] | | |
- css
- twitter-bootstrap
- less
На мой взгляд, вы можете сделать это со стандартной средой начальной загрузки следующим образом:
Получается три Вам не нужно добавлять какой-либо дополнительный CSS, так как эти классы .text-left, right и center поставляются с начальной загрузкой. Думаю, это самый простой способ… Обратите внимание, что вложенными элементами являются http://jsfiddle.net/TUwek/ http://jsfiddle.net/GNPpX/1/ Вы можете сделать это с помощью float Не знаю, именно то, что вам нужно, но с помощью HTML: CSS: The Fiddle Я заставил его работать со следующим: HTML
встроенных
элементов
КСС
дел.
{
граница: сплошная известь 1px;
выравнивание текста: по центру;
}
охватывать
{
цвет фона: #ff8;
}
диапазон: первый ребенок
{
цвет фона: #f8f;
плыть налево;
}
диапазон:последний ребенок
{
цвет фона: #8ff;
поплавок: справа;
}
JSFiddle
display: table;
на родительском и дисплее: табличная ячейка
на дочерних элементах дает вам такой рендеринг:
ул {
дисплей: таблица;
ширина: 60%;
}
ли {
отображение: таблица-ячейка;
}
li.left {выравнивание текста: по левому краю;}
li.right {выравнивание текста: вправо;}