Как задать размер кнопки в css

Установить определенный размер CSS кнопки?

Все бы хорошо, но длина кнопки настраивается сама, в зависимости от длины текста.

Как сделать так, чтобы кнопки имели одинаковую длину и текст по центру? Длину в px.

Вопрос задан более трёх лет назад
39154 просмотра

Комментировать
Решения вопроса 1

.button

.button < width: 250px; height: 26px; border: 1px solid #0a3c59; background: #3e779d; background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d)); background: -webkit-linear-gradient(top, #65a9d7, #3e779d); background: -moz-linear-gradient(top, #65a9d7, #3e779d); background: -ms-linear-gradient(top, #65a9d7, #3e779d); background: -o-linear-gradient(top, #65a9d7, #3e779d); background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%); /*padding: 12px 24px;*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; text-shadow: #7ea4bd 0 1px 0; color: #eff1f2; font-size: 17px; font-family: helvetica, serif; text-decoration: none; vertical-align: middle; >

Ответ написан более трёх лет назад
Нравится 2 7 комментариев
Cheezo @Cheezo Автор вопроса

Надо бы скажем чтобы кнопка JavaScript было по размеру (длине) как и кнопка Лекционный материал.

Добавить еще display: block;
Cheezo @Cheezo Автор вопроса
Во, теперь они имеют одинаковый размер, правда текст не по центру.
clip2net.com/s/4WK96U

Попробуйте изменить
display:block;
на
display:inline-block;

И добавить
line-height:26px;

Cheezo @Cheezo Автор вопроса

clip2net.com/s/4WKeug
Так, теперь они выровнялись, спасибо, но нужно чтобы они также были по центру.
Т.е. текст был не слева, а по середине.

text-align: center;
Cheezo @Cheezo Автор вопроса
Как я не догадался.
Всем огромнейшей спасибо, все работает как нужно.
clip2net.com/s/4WKiNP
Ответы на вопрос 1
width: . ; + text-align: center; ? Или в чем подвох здесь?
Ответ написан более трёх лет назад
Cheezo @Cheezo Автор вопроса

Скажу честно, я в CSS еще не очень понимаю.
Просто сейчас длина кнопки настраивается сама, по длине текста в ней.
А надо чтобы я могу сам задать ее размер (скажем 250х26 px) и текст в ней был по центру, вне зависимости от его длины.
Было бы здорово, если бы вы намекнули, куда вписать строчку.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

HTML
+1 ещё

Как пофиксти проблему с амперсантом?

1 подписчик
12 часов назад
59 просмотров

Оформление Input type=»text»

Здравствуйте, возможно ли сменить оформление текстового поля input? Если это возможно, подтолкните в нужное направление. Смотрел в Googl`e, ни чего внятного не нашел. Спасибо.

Отслеживать
задан 13 июл 2012 в 23:17
111 2 2 золотых знака 2 2 серебряных знака 5 5 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Лучше будет учесть все

input[type="text"] < border: 1px solid #cccccc; //цвет рамки border-radius: 3px; //закругление углов (общее) -webkit-border-radius: 3px; //закругление углов (Google Chrome) -moz-border-radius: 3px; //закругление углов (FireFox) -khtml-border-radius: 3px; //закругление углов (Safari) background: #ffffff !important; // желательно прописывать, так как в Chrome при сохранных данных оно может быть желтым outline: none; // удаляет обводку в браузерах хром(желтая) и сафари(синяя) height: 24px; // высота на свое усмотрение width: 120px; // ширина на свое усмотрение color: #cccccc; //цвет шрифта в обычном состоянии font-size: 11px; // Размер шрифта font-family: Tahoma; // Стиль шрифта >

Можно также добавить стиль при на нажатии(фокусе) на поле

input[type="text"]:focus

input[type="text"]

не обязательно можно просто

input

тогда свойство будет применено для всех инпатов.

Отслеживать
ответ дан 5 авг 2012 в 11:02
1,665 5 5 золотых знаков 35 35 серебряных знаков 73 73 бронзовых знака

Для всех Input с type=»text»

input[type="text"]

Отслеживать
ответ дан 14 июл 2012 в 8:01
1,131 1 1 золотой знак 8 8 серебряных знаков 24 24 бронзовых знака

Можно. В css пишешь стиль, а input’у присваивашь нужный класс. Вот пример из админки DLE. В CSS

.edit < border:1px solid #9E9E9E; color: #000000; padding: 3px; margin-top: 2px; margin-bottom: 2px; font-size: 11px; font-family: Verdana; background: #FFF; >.bk < background:#fff url(images/shadow.png) repeat-x; >

Ну и к input ‘у пишешь:

Отслеживать
4,966 10 10 золотых знаков 33 33 серебряных знака 62 62 бронзовых знака
ответ дан 14 июл 2012 в 0:10
75 8 8 бронзовых знаков
@Morty, Чтобы отформатировать код, выделите его мышью и нажмите на кнопку 101010 редактора.
14 июл 2012 в 6:08

Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Ещё один способ отделить смысловые участки текста — использование разного размера шрифта. Мы уже встречались с тем, что браузеры стилизуют заголовки по разному. Именно размером текста отделяется заголовок от заголовка и так далее.

Управлять размером текста в CSS можно с помощью свойства font-size , которое принимает числовое значение и единицу измерения. Сейчас, в качестве единицы измерения мы будем использовать пиксели, хотя есть ещё несколько важных единиц, которые будут изучены к концу этого курса.

Внимание! Этот параграф со стандартным размером шрифта

.warning

Внимание! Этот параграф со стандартным размером шрифта

Внимание! Этот параграф имеет размер шрифта 24 пикселя

Задание

Добавьте в редактор параграф с классом big и установите размер шрифта в 60 пикселей. Стили добавьте в тег

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Читать:

Цифровая клавиатура как включить