CSS图像位置

时间:2012-08-17 03:02:18

标签: css

我正在尝试将带有图像背景的div显示在文本框的右侧。我试过Float = none,left,right,我已经尝试了位置甚至玩边缘但似乎没有任何东西让它留下来。

<div id="status" style="background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat; margin-left: 245px; margin-top: 2px;"></div>


<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />

2 个答案:

答案 0 :(得分:1)

这对你有用吗?

<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />

<div id="status" style="display:inline;background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat;padding-right:16px;"></div>​

左右浮动尝试将元素尽可能地扔到容器的一侧。如果您希望元素位于第二个元素的右侧,请将其放在HTML中的第二个元素之后。此外,div是块元素。块元素想要在自己的行上。使用内联元素(如span),或在新行上不需要的块元素上将display css属性设置为inline

编辑:这是你的跨度

<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />

<span id="status" style="background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat;padding-right:16px;"></span>​

答案 1 :(得分:0)

只需float:right div并删除245px的左边距,这样就不会将输入推得太远。