如何使两个按钮尺寸相同?

How can I fix this because if the text is long the button will be longer.

如何修复这个，因为如果文本很长，按钮就会变长。

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;
}

button:hover {
	background: #3E3E3E;
}

<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>

7 个解决方案

#1

In this case you should use. min-width attribute. Use min-width:100px

在这种情况下，您应该使用。min-width属性。使用min-width:100 px

#2

Add width to the style definition, for example:

在样式定义中增加宽度，例如:

max-width: 100px;

or just:

或者是:

width: 100px;

https://jsfiddle.net/ghc9aw3w/

https://jsfiddle.net/ghc9aw3w/

Of course you have to adjust the value to the text's required length.

当然，您必须将值调整到文本所需的长度。

#3

you need to set a width and height for your button and to centre text horizontally and vertically use the following:

您需要为您的按钮设置一个宽度和高度，并在水平和垂直方向上设置中心文本，使用以下内容:

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

width and height can be set to match your desired measurements.

宽度和高度可以设置为与您期望的尺寸匹配。

This can be used for future demonstration:

这可以用于将来的演示:

https://jsfiddle.net/j9njkwkq/

https://jsfiddle.net/j9njkwkq/

EDIT: of course you can add cursor:pointer in order to get the "right" button effect on a browser.

编辑:当然可以添加光标:指针，以便在浏览器上获得“正确”按钮效果。

#4

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:200px
}

button:hover {
	background: #3E3E3E;
}

<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>

#5

You could make a wrapper and than set the width to 100%

您可以制作一个包装，并将宽度设置为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>

#6

Give "width" for the class .md-trigger or button to make that same even if long text is entered.

为类.md-trigger或按钮设置“宽度”，即使输入了很长的文本，也要这样做。

#7

For perfect styling wrap the contents inside a div

为了完美的样式，将内容包装在div中。

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

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>

then the style would be

然后是风格。

.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;
}