按钮显示第二个边框（css）

Question

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

Demo here

• 当我尝试使用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;
}

Answer 2

你提到按钮没有像你希望的那样响应宽度。

#text {
    display: table;
    vertical-align: middle;
    text-align:center;
    position: absolute;
    width: 100%;
    max-width:300px;
    left: 10%;
    right:10%;
    height: 100%;
    top: 0;
}

如果您只想要300px，无论其他内容是什么大小，请设置

#text{
    width:100%;
    max-width:300px;
}

你的文字div实际上是你所看到的具有背景的文本div 你的按钮正是你所说的那样，最大宽度为300px但是包含的div看起来像按钮的一部分，不确定为什么你需要包含文本div，但我想有一个原因。

使用上一个答案和此代码，它看起来像{in Chrome}