如何显示输入提交像div?

时间:2014-04-30 01:18:48

标签: css input submit-button

假设我有输入类型=“提交”,我输入就像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照片。我可以正常点击我的提交输入。

谢谢,

1 个答案:

答案 0 :(得分:0)

要获得完全相同的样式,您需要添加一些额外的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;
}