按钮显示第二个边框(css)

Question

我正在尝试制作布局网格,但似乎无法做到正确...

在这里演示.

• 当我尝试垂直居中他的文字时,按钮显示这个奇怪的第二个边框display: table-cell;.
• 理想情况下,按钮必须具有300px的最大宽度,但这也不起作用......它随窗口继续增长

任何人对如何实现这一点都有任何想法？

Answer 1

第1部分: 删除边框:

.ui-btn-inner {
    border-top: 0;
}

第2部分: 将按钮的显示更改为inline-block(您可能需要调整顶部和底部的填充)

#button {
    background: grey;
    display: inline-block;
    width: 100%;
    max-width: 300px;
    margin: 0;
}