Как сделать две кнопки одинакового размера?

Как это исправить, потому что если текст длинный, кнопка будет длиннее.Как сделать две кнопки одинакового размера?

enter image description here

button { 
 
\t border: none; 
 
\t padding: 1.1em 6.5em; 
 
\t background: #00abc6; 
 
\t color: #fff; 
 
\t font-family: 'TitilliumText22LRegular', Arial, sans-serif; 
 
\t font-weight:bold; 
 
\t font-size: 1.1em; 
 
\t border-radius: 0px; 
 
} 
 

 
button:hover { 
 
\t background: #3E3E3E; 
 
}

<button class="md-trigger" data-modal="modal-1">Login</button> 
 
\t \t <center><p>Or</p></center> 
 
     <button class="md-trigger" data-modal="modal-2">Register</button>

источник

2015-07-01 Mat

см ширина CSS стиль – nikhil

задание ширины на обоих. – yogihosting

ширина Добавить в определении стиля, например:

max-width: 100px;

или просто:

width: 100px;

https://jsfiddle.net/ghc9aw3w/

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

источник

2015-07-01 11:05:00

, вероятно, хотите 'min-width', а не max, иначе вы могли бы закончить с обрезанным текстом. – Pete

Я предположил, что OP не хочет, чтобы кнопка расширялась, что происходило бы с набором' min-width'. Я также предполагаю, что это необходимо для конкретного текста, который имеет постоянную и известную длину. –

А я предполагал, что он хотел, чтобы кнопки были одинаковой длины, но были установлены на самую длинную кнопку, чтобы она не выглядела обрезанной, как в вашей скрипке: https://jsfiddle.net/ghc9aw3w/1/ – Pete

В этом случае вы должны использовать. атрибут min-width. Использование min-width:100px

источник

2015-07-01 11:07:14 Mathivanan

Почему 'min-width 'а не' width'? –

Шахта не работала с минимальной шириной, но ширина работала. – mur7ay

вам необходимо установить ширину и высоту для вашей кнопки и центрирования текста по горизонтали и по вертикали используйте следующее:

width:120px; 
height:50px; 
text-align:center; 
line-height:1.1em; 
font-size:1.1em;

ширина и высота может быть установлен в соответствии с вашими требуемые измерения.

Это может быть использовано для будущей демонстрации:

https://jsfiddle.net/j9njkwkq/

EDIT: , конечно, вы можете добавить курсор: указатель, чтобы получить «правильный» эффект кнопки в браузере.

источник

2015-07-01 11:08:22

Дайте «ширину» для класса .md-trigger или кнопку, чтобы сделать то же самое, даже если введен длинный текст.

источник

2015-07-01 11:09:27

button { 
 
\t border: none; 
 
\t padding: 1.1em 6.5em; 
 
\t background: #00abc6; 
 
\t color: #fff; 
 
\t font-family: 'TitilliumText22LRegular', Arial, sans-serif; 
 
\t font-weight:bold; 
 
\t font-size: 1.1em; 
 
\t border-radius: 0px; 
 
width:200px 
 
} 
 

 
button:hover { 
 
\t background: #3E3E3E; 
 
}

<button class="md-trigger" data-modal="modal-1">Login</button> 
 
\t \t <center><p>Or</p></center> 
 
     <button class="md-trigger" data-modal="modal-2">Register</button>

источник

2015-07-01 11:12:47

Вы могли бы сделать обертку и чем установить ширину до 100%

#login { 
 
    width: 300px; 
 
} 
 

 

 
button { 
 
    border: none; 
 
    padding: 1.1em 6.5em; 
 
    background: #00abc6; 
 
    color: #fff; 
 
    font-family: 'TitilliumText22LRegular', Arial, sans-serif; 
 
    font-weight:bold; 
 
    font-size: 1.1em; 
 
    border-radius: 0px; 
 
    width: 100%; 
 
} 
 

 
button:hover { 
 
    background: #3E3E3E; 
 
}

<div id='login'> 
 
    <button class="md-trigger" data-modal="modal-1">Login</button> 
 
    <center><p>Or</p></center> 
 
    <button class="md-trigger" data-modal="modal-2">Register</button> 
 
</div>

источник

2015-07-01 11:17:23 arcs

Для идеальной укладки обернуть содержимое внутри DIV

https://jsfiddle.net/ghc9aw3w/2/

<div class="btnwrap"> 
<button class="md-trigger" data-modal="modal-1">Login</button> 
     <center><p>Or</p></center> 
    <button class="md-trigger" data-modal="modal-2">Register</button> 
</div>

то стиль будет

.btnwrap{ 
width:200px; 
overflow:hidden; 
} 

button { 
width:100%; 
display:block; 
border: none; 
padding: 1.1em 5em; 
background: #00abc6; 
color: #fff; 
font-family: 'TitilliumText22LRegular', Arial, sans-serif; 
font-weight:bold; 
font-size: 1.1em; 
border-radius: 0px; 
text-align:center; 

} 

button:hover { 
background: #3E3E3E; 
}

источник

2015-07-01 12:20:34

Как сделать две кнопки одинакового размера?

ответ

Смежные вопросы