css - divのような入力送信を表示するには?

Question

input type="submit" があり、入力を div と同じように作成すると、コードは次のようになります...

<style>
.me{width:200px;height:200px;background:green;text-align:center}
img{width:200px;height:50px;}
</style>

<div class="me">
<img src="mywife.png"/>
Emma Watson
</div>

<form action="marry">
<input class="me" type="submit">
<img src="mywife.png"/>
Emma Watson    
</input>
</form>

エマ・ワトソンの同じ写真を 2 枚作成し、下に彼女の名前を付けます。そして、通常どおり送信入力をクリックできます。

ありがとう、

Answer 1

まったく同じスタイルを得るには、HTML を追加する必要があります。

http://jsfiddle.net/e3yT2/1/

HTML:

<button class="me abspos" type="submit">
    <span>
        <img src="mywife.png"/>
        Emma Watson
    </span>
</button>

CSS:

.me {
    width:200px;
    height:200px;
    background:green;
    text-align:center;


    /* I added this */
    padding: 0;
    border-width: 0;
}

/* extra code for vertical alignment */
.me.abspos {
    position: relative;
}
.me.abspos span {
    position: absolute;
    top: 0;
    left: 0;
}