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

Question

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

演示在这里。

• 当我尝试使用display: table-cell;.
• 理想情况下，按钮的最大宽度必须为 300 像素，但这也不起作用……它会随着窗口继续增长

有人对如何实现这一目标有任何想法吗？

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 实际上是您所看到的背景。
您的按钮完全按照您的要求执行，最大宽度为 300px，但包含的 div 看起来像按钮的一部分，不太确定为什么需要包含文本的 div，但我想是有原因的。

使用前面的答案和这段代码，它看起来像 {in Chrome}