如何让两个按钮大小相同？

Question

如何解决此问题，因为如果文字很长，则按钮会更长。

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>

Answer 1

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

Answer 2

您需要为按钮设置宽度和高度，并在水平和垂直方向上居中使用以下内容：

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

可以设置宽度和高度以匹配您想要的测量值。

这可以用于将来的演示：

https://jsfiddle.net/j9njkwkq/

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

Answer 3

为样式定义添加宽度，例如：

max-width: 100px;

或只是：

width: 100px;

https://jsfiddle.net/ghc9aw3w/

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

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

Answer 5

您可以创建一个包装器，然后将宽度设置为100％

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 6

为类.md-trigger或按钮指定“width”，即使输入了长文本，也要使其相同。

Answer 7

完美样式包装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;
}