我不是 CSS 专家。我正在尝试放置一个 <input type="button">
在 <img>
的中心我在这样做时遇到了一些麻烦。 Here's a fiddle这是我的 HTML:
<div id="avatar">
<img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
<input id="btnAvatar" class="button" type="button" name="Button" value="Change">
<p>Text</p>
</div>
我希望输入显示在图像上,而且文本需要在右侧。我尝试使用:
img { width: 300px; height: 300px; float: left; }
input { position: absolute; margin:140px 0px 0px 130px;}
但它只适用于 chrome/safari,在其他浏览器上,按钮放在图像后面而不是前面。
做这个的最好方式是什么?
Obs.:按钮所在的空间,需要为空,否则文字会向上移动。
这是它在 chrome 上的显示方式:
这是它在 Firefox 上的显示方式:
最佳答案
您需要在绝对位置上指定 x 和 y 位置。将输入的 css 更改为:
input { position: absolute; top:0; left:0; margin:140px 0px 0px 130px;}
关于css - div 前面的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13880567/