logo标签列表

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

htmlcss
10
我该如何解决这个问题，因为如果文本很长，按钮也会变得更长。 

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个回答
5

您需要为按钮设置宽度和高度，并使用以下方法水平和垂直居中文本：

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

可以设置宽度和高度以匹配您所需的尺寸。

这可以用于未来的演示：

https://jsfiddle.net/j9njkwkq/

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

3
在这种情况下，你应该使用min-width属性。 使用min-width:100px。
2
为什么要使用 min-width 而不是 width？ - Salman A
2
在样式定义中添加宽度，例如：
max-width: 100px;

或者只是：
width: 100px;

https://jsfiddle.net/ghc9aw3w/

当然，您需要根据文本所需的长度调整值。
1
可能你需要使用 min-width 而不是 max-width，否则你的文本可能会被裁剪。 - Pete
我假设 OP 不想要按钮放大，这会发生在设置了 min-width 的情况下。我还假设这是针对特定文本需要的，该文本具有恒定和已知的长度。 - n-dru
1
啊，我假设相反的情况是他想要按钮长度相同，但设置为最长的按钮，这样它就不会像你的fiddle中那样被剪裁了：https://jsfiddle.net/ghc9aw3w/1/ - Pete
1

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>

1
你可以创建一个包装器，然后将宽度设置为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>

0
为了完美的样式，将内容包裹在一个 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;
}
0
给类.md-trigger或按钮设置“width”，以使即使输入长文本，它也保持相同。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接