html - ボタンは 2 番目の境界線を表示します (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;
}

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} のようになります