css - 如何像div一样显示输入提交？

Question

假设我有输入 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>

将制作两张完全相同的 Emma Watson 的照片，底部有她的名字。我可以像往常一样点击我的提交输入。

谢谢，

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;
}