html - 如何使两个按钮大小相同？

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

您需要为按钮设置宽度和高度，并使用以下命令将文本水平和垂直居中:

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

可以设置宽度和高度以匹配您想要的尺寸。

这可以用于 future 的演示:

https://jsfiddle.net/j9njkwkq/

编辑: 当然，您可以添加 cursor:pointer 以获得浏览器上的“正确”按钮效果。