Разное

Ширина кнопки html: Как изменить размер кнопки submit.

29.01.2023

html — Почему кнопка по ширине и высоте больше, чем задано?

Почему кнопка по ширине и высоте получается больше, чем задано?

Был применен box-sizing: border-box;.

И из-за этого кнопка «заезжает» за экран.

Ссылка на CodePen

.button a {
  text-transform: uppercase;
  font-family: Roboto;
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  width: 195px;
  height: 50px;
  box-sizing: border-box;
  padding: 18px 35px;
  background: #ff7340;
  border-radius: 25px;
  text-decoration: none;
}
<div>
  <a href="/adventures">adventures</a>
</div>
  • html
  • css

В Вашем случае Вы задаете pading(и) с обоих сторон текста и Вам не нужно задавать width и height отдельно для Вашей кнопки. Тогда ее высота будет складываться из размера шрифта и отступов по вертикали, а ширина исходя из длинны текста и его отступов по горизонтали. Границы так же стоит учитывать при их наличии.

Когда Вы задаете дополнительный width и/или height, в случае если, например, width больше чем длинна текста, его отступов и границ, то размер Вашей кнопки будет равен заданному значению width, если же меньше, то дальше все зависит от конкретного браузера и вероятность того что кнопка окажется не того размера крайне вероятна.

Поскольку <a> это inline элемент, то он выравнивался относительно уровня начала самого текста. Именно поэтому он «заезжал под экран», и в том числе поскольку стили для его родительского блока так же отсутствовали.

Для того что бы это исправить достаточно превратить его в блочный элемент, добавив ему свойство display со значением block или inline-block.

.button a {
  display: inline-block; 
  text-transform: uppercase;
  font-family: Roboto;
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;  
  box-sizing: border-box;
  padding: 18px 35px;
  background: #ff7340;
  border-radius: 25px;
  text-decoration: none;
}
<div>
  <a href="/adventures">adventures</a>
</div>

2

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Три кнопки всегда одинаковой ширины: olmokhov — LiveJournal

Давно я чего-то не писал про верстку. Исправимся =)

Допустим вам нужно сверстать что-то вроде такого:

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

Первое, что приходит на ум: три div’а шириной 33% и float: left. Но, к сожалению, эти три div’а всегда будут шириной 33%, и если текст в них не будет влазить то в лучшем случае он обрежется, а в худшем будет как-то так:

Дальше кажется что на помощь придут таблицы, но три ячейки шириной 33% также не дают нужного эффекта – каждая схлапывается до размеров своего содержимого. И даже table-layout: fixed не помогает.

В какой-то момент мне показалось что реализовать такое невозможно. Но задачка загружена в мозг и он перебирает все возможные варианты. Итак:

Суть трюка очень простая, нужно немножко уйти от конечного результата и на секунду представить наши кнопки вот так:

Допустим для кнопок мы имеем такой код:

<div>кнопка</div>
<div>красивая</div>
<div>Длинннннннная</div>

Давайте обернем все это таблицей и зададим каждой . button ширину 100%:

<table>
    <tr>
        <td>
            <div>кнопка</div>
            <div>красивая</div>
            <div>Длинннннннная</div>
        </td>
    </tr>
</table>

И, внезано, мы уже получили поведение, которое нам нужно, только для вертикально расположенных элементов. Внимательный читатель спросит: а зачем здесь таблица? А затем, что только таблица умеет останавливать свое уменьшение, при упирании в контент. Таким образом таблица всегда будет ширины максимальной .button, а width: 100% заставит остальные в случае упирания остановить свой рост.

Теперь нам нужно сделать из вертикальных кнопок горизонтальные. Тут всё просто 🙂 Добавим в каждый .button ещё один элемент и пронумеруем button’ы. Получим такой код:

<table>
    <tr>
        <td>
            <div>
                <div>кнопка</div>
            </div>
            <div>
                <div>красивая</div>
            </div>
            <div>
                <div>Длинннннннная</div>
            </div>
        </td>
    </tr>
</table>

Теперь обманем браузер и скажем . button {height: 0}. В результате кнопки сожмутся в одну. Второй раз обманем браузер и сдвинем вторую и третью кнопку на 100 и 200% с помощью свойства left:

.button-i
{
    position: relative;
}

.button_2 .button-i
{
    left: 100%;
}

.button_3 .button-i
{
    left: 200%;
}
И получаем нужное нам поведение. 

Блудный сын

Как всегда в IE6 все будет совсем не так, как в других браузерах. В нем мы увидим лесенку, и все потому, что IE6 не применит нулевую высоту к .button. Это известная проблема, она связана с тем, что IE6 не умеет делать блок по высоте меньше, чем заданный в нем же размер font-size. Обычно эту проблему обходят задавая font: 0/0 a; Но в нашем случае этим методом воспользоваться нельзя, так как нам нужно вполне конкретное значение font-size.

Но, как говорится, и на старуху бывает проруха, IE6 можно в данном случае тоже обмануть с помощью двух свойств:  float: left; margin-bottom: -100%. Говоря терминами Сереги Чикуенка (я впервые у него вычитал подобный термин) мы подавляем влияние блока на высоту контейнера. Таким образом мы получаем нужное нам поведение и в IE6.

Кстати, интересно то, что я когда столкнулся с этой проблемой и решив её, я переписал полностью решение на float и margin-bottom, ведь и другие браузеры понимают это. Но внезапно проблемы возникли в 7-м ИЕ, который вел себя точно также как 6-й без хаков в предыдущем решении. Пришлось вернуться к первому решению и хачить под ИЕ6.

Ограничения

Понятно что у этого метода есть ограничение в виде фиксированной высоты кнопок, но, по-моему, реализовывать обратное и не нужно, и не возможно. Хотя, возможно, я ошибаюсь =)

html — Изменение размера кнопки

спросил

Изменено 2 года, 6 месяцев назад

Просмотрено 245 тысяч раз

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

В своем HTML я пробовал (но не работает):

 
Это кнопка

И соответствующий CSS:

 .button {
  цвет фона: #000000;
  цвет: #FFFFFF;
  поплавок: справа;
  отступ: 10 пикселей;
  радиус границы: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

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

Добавляя ширину и высоту, как я называю 9Кнопка 0011 класс , кажется, ничего не делает с ее размером. Кто-нибудь знает, как я могу это сделать? И если я поставлю ширину и высоту в CSS

, то кнопка будет везде одинакового размера.

  • html
  • css
  • кнопка
  • размер

1

Вы не должны использовать атрибуты «ширина» и «высота» напрямую, используйте атрибут стиля, например style="some css here" , если вы хотите использовать встроенные стили:

Это кнопка

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

 .button {
        цвет фона: #000000;
        цвет: #FFFFFF;
        отступ: 10 пикселей;
        радиус границы: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        поле: 10px
    }
    
    .small-btn {
        ширина: 50 пикселей;
        высота: 25 пикселей;
    }
    
    .medium-btn {
        ширина: 70 пикселей;
        высота: 30 пикселей;
    }
    
    .big-btn {
        ширина: 90 пикселей;
        высота: 40 пикселей;
    } 
 
Это большая кнопка

    
Это кнопка среднего размера
 

    
Это маленькая кнопка

Пример jsFiddle

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

3

Если вы хотите вызвать другой размер для встроенной кнопки, вы, вероятно, сделаете это так:

 
Это кнопка

Или, лучший способ иметь разные размеры (скажем, будет 3 стандартных размера для кнопки) — это иметь классы только для размера.

Например, вы бы назвали свою кнопку так:

 
Это кнопка

И в вашем УСБ

 .button.small { ширина: 60 ​​пикселей; высота: 100 пикселей; }

и просто создайте классы для каждого желаемого размера. Таким образом, у вас все еще есть преимущества использования таблицы стилей, если, скажем, вы хотите изменить размер всех маленьких кнопок одновременно.

1

Другой альтернативой является то, что вам разрешено иметь несколько классов в теге. Рассмотрим:

 
Это большая кнопка
 

 
Это маленькая кнопка

И CSS:

 . button {
     /* все ваши общие стили кнопок */
 }
 .большой {
     высота: 60 ​​пикселей;
     ширина: 100 пикселей;
 }
 .маленький {
     высота: 40 пикселей;
     ширина: 70 пикселей;
 }

и так далее.

3

Использовать встроенные стили:

 
Это кнопка

Скрипка

1

попробовать эту кнопку с изменяемым размером

3

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — кнопка HTML использует только ширину и высоту текста в кнопке

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

CSS

 .flexcontainer {
дисплей: гибкий;
выравнивание элементов: по центру;
переполнение: скрыто;
}
изображение [ширина = "500"] {
граница: 3 пикселя сплошная #5F5F5F;
радиус границы: 3px;
плыть налево;
}
#leftRetail {
дисплей: блок;
высота: 354px;
ширина: 1308 пикселей;
поплавок: справа;
выравнивание текста: по центру;
вертикальное выравнивание: посередине;
высота строки: 354px;
}
.кнопка {
ширина: 250 пикселей;
высота: 200 пикселей;
фон: #ed2626;
радиус границы: 2px;
белый цвет;
вес шрифта: полужирный;
текстовое оформление: нет;
}

HTML

 

            <дел>
                
            

            <дел>
                Розничное меню