Блог

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

Как я могу добавить отступы в ?

#html #css #user-interface #button

#HTML #css #пользовательский интерфейс #кнопка

Вопрос:

Прошло пару месяцев с тех пор, как я занимался серьезным кодированием HTML / CSS, так что я, вероятно, многое пропустил, но сегодня я наткнулся на действительно странную вещь.

Когда я пытаюсь обратиться padding к а <input type="submit"> , это больше не работает. Я примерно на 99% уверен, что мне удалось это сделать, но теперь кажется, что это было невозможно.

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

Вот небольшая демонстрация проблемы

 <input type="submit" value="Submit" style="padding: 5px 10px;">
<button type="submit" value="Submit" style="padding: 5px 10px;">Submit</button>

и как это выглядит в Google Chrome 15 на Mac

введите описание изображения здесь

но, похоже, это вообще не работает в Firefox 4

введите описание изображения здесь

Вот ссылка на демонстрационный источник на JSbin.com

Я бы поспорил, что это работало около 6 месяцев назад, но, должно быть, что-то изменилось. Я использую Windows Vista и OS X Snow Leopard с недавним обновлением до Lion, но, похоже, это не так.

Я что-то упускаю из виду?

редактировать: исправление опечатки НЕ помогло. Заполнение по-прежнему не применяется к первой кнопке.

редактирование 2: после прохождения Adobe Browserlab похоже, что это специфичная для OS X проблема. Я все же хотел бы знать, как это сделать даже в OS X.

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

1. У вас опечатка в вашем коде. Это должно быть 5px в <input type="submit" value="Submit" style="padding: 5x 10px;"> , что делает его <input type="submit" value="Submit" style="padding: 5px 10px;">

2. В качестве примечания единственная причина использовать input[type="button"] элемент — использовать JavaScript. Поскольку они так мешают стилю, просто используйте a[href="#"] вместо этого элемент. Что касается input[type="submit"] … удачи.

3. при использовании отступов на кнопках отправки не забывайте, что есть неприятная ошибка ie: latrine.dgx.cz/the-stretched-buttons-problem-in-ie чтобы исправить это, используйте overflow:visible

4. @Sasha ты прав, но это все равно не решает проблему.

5. @Darth отлично работал для меня при тестировании. Вы тестировали в другой среде?

Ответ №1:

Эта проблема была очевидна и для меня в OS X Firefox. Решение состоит в том, чтобы отключить внешний вид браузера по умолчанию, прежде чем применять свой собственный:

 input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Дополнительная информация по адресу: http://css-tricks.com/almanac/properties/a/appearance /

Ответ №2:

<input type="submit" value="Submit" style="padding: 5x 10px;">

Вы забыли p в 5 пикселей. Это нарушает стиль.

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

1. 1 (не знаю, опечатка ли это в вопросе или реальная проблема, но я должен отдать тебе должное, ПОТРЯСАЮЩИЙ глаз: P)

2. вау… сначала я собирался сказать : «Боже , я такой глупый» … но потом я обнаружил, что это все еще не работает, даже после того, как вы исправили опечатку :

Ответ №3:

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

 input[type="submit"], input[type="reset"] {
    background: none repeat scroll 0 0 #8C8C69;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    padding: 7px;
    text-transform: uppercase;
}

Ответ №4:

Вы должны использовать box-sizing свойство:

 input[type="submit"] {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}
Метки: