3

我不是 CSS 专家。我试图将 an 放在 an<input type="button">的中心，但<img>我在这样做时遇到了一些麻烦。这是一个小提琴，这是我的 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上的显示方式：

在此处输入图像描述

4

5 回答 5

4

您需要在绝对位置上指定 x 和 y 位置。将用于输入的 css 更改为：

input { position: absolute; top:0; left:0; margin:140px 0px 0px 130px;}
于 2012-12-14T14:33:59.043 回答
4

有一种简单而干净的方法可以执行此代码。诀窍是使用 DIV 标签来包含和定位所有内容。

  1. 使用主 DIV 包含所有内容并为其赋予 position:relative 属性。
  2. 将 img 和 input 标签放在单个 DIV 中，并为该 DIV 分配 float:left 属性。
  3. 使用 CSS 选择 P 标签并将其浮动到左侧。这会将文本放置在包含 img 和输入的 DIV 旁边。
  4. 现在为输入标签分配 position:absolute 属性，同时使用属性 TOP & LEFT 将其定位到位。

这是一个例子：

<div id="avatar-container">
     <div id="avatar-image-btn">
          <img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar"  />
          <input id="btnAvatar" class="button" type="button" name="Button" value="Change">
     </div>
     <p>Text</p>
</div>

<style> 
    #avatar-container { position: relative; }
    #avatar-container p { float: left; }
    #avatar-image-btn { float: left; }
    #avatar-image-btn img { }
    #avatar-image-btn input { position: absolute; top: 135px; left: 120px; cursor: pointer; }
</style>

看，干净，简单，每次都可以使用，并且与多浏览器兼容。

* 不小心使用时，margin 属性可能会造成混乱。最佳做法是将其用于在 div 中堆叠标签，而不是用于具有大间隙边距的定位。

于 2012-12-14T16:08:54.573 回答
2

使用 z-index

input { position: absolute; margin:140px 0px 0px 130px; z-index:2}

这是将您的按钮向上推一层

在正确理解问题后，这里是一个解决方案

img { width: 300px; height: 300px; float: left; border:1px solid black; position:absolute}
input { position: absolute; margin:140px 0px 0px 130px;}

正如评论中提到的，问题出在定位上

于 2012-12-14T14:29:29.007 回答
1

您可以添加position:relative#avatar 并提供#btnAvatartop:0; left:0;

于 2012-12-14T14:32:49.027 回答
1

这应该这样做：http: //jsfiddle.net/a6tA7/9/

我建议您使用top:andleft:来定位输入元素，而不是margin:

于 2012-12-14T14:46:55.497 回答