-1

次の状況になりました： jsfiddle

<button type="submit">
    <div class="icon"></div>
</button>

button {
    width: 250px;
    height: 250px;
    background: orange;
    padding: 0px;
    border: 1px solid black;
    display: inline-block;
    position: relative;
}
.icon {
    width: 150px;
    margin: 0px auto 0px auto;
    height: 80px;
    display: block;
    position: relative;
    background: pink;
    vertical-align: top;
}

上部のボタン内に div が必要です。負のトップを使用すると、ボタン内の他の要素は最初の div 要素の後に正確ではありません。vertical-align top で icon-div を設定すると、何も起こりません。

なんでいつも真ん中なの？どうすればこれを上に置くことができますか？同じルールのボタンの代わりにタグを使用すると、この問題は発生しません。

何か案が？

4

2 に答える 2

1

<div>の中に入れることは想定されていません<button>。これは有効なドキュメントではありません。

に置き換える<button>と<div>、期待どおりに動作します ( JSFiddle ):

<div type="submit">
    <div class="icon"></div>
</div>

そしてCSS：

div[type="submit"] {   // Only change here, to properly match div instead of a button
    width: 250px;
    height: 250px;
    background: orange;
    padding: 0px;
    border: 1px solid black;
    display: inline-block;
    position: relative;
}
.icon {
    width: 150px;
    margin: 0px auto 0px auto;
    height: 80px;
    display: block;
    position: relative;
    background: pink;
    vertical-align: top;
}
于 2013-10-23T20:16:16.017 に答える