如何让扩展搜索框不会移动提交按钮?
问题描述:
我正在编码一个搜索框,当您单击页面上的其他位置时,该搜索框将重新展开焦点并再次合同。如何让扩展搜索框不会移动提交按钮?
问题是,我有一个提交图标在输入框的右侧,并且随着输入框的扩展(使用jQuery'animate'),它将提交图标向下移动。
你可以看到我在这里所做的:
http://dl.dropbox.com/u/7966602/ID/WebContent/index.html?x=11&y=7#
请记住,页面显然仍没有这样做。
您应该能够查看源代码以查看HTML和jQuery。 CSS是;
box-shadow: 0px 0px 5px #000;
height:20px;
float:right;
margin-top:24px;
margin-right:26px;
padding-top:3px;
padding-bottom:2px;
border-width: 2px;
border-style: solid;
border-color: #e5e5e5;
-moz-border-radius: 3px;
border-radius: 3px;
background: #333333;
background-image: -moz-linear-gradient(#ffffff, #e5e5e5);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e5e5e5),color-stop(1, #ffffff));
}
searchBoxHover#搜寻{
font: bold 14px Arial, Helvetica;
color: #808080;
width:100px;
position:relative;
left:3px;
top:-5px;
background: #333333;
background-image: -moz-linear-gradient(#ffffff, #e5e5e5);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e5e5e5),color-stop(1, #ffffff));
border:0px;
}
searchBoxHover #submit {
margin:0px;
padding:0px;
border:0px;
width:21px;
height:20px;
margin-right:3px;
}
搜索盒{
box-shadow: 0px 0px 5px #000;
height:20px;
float:right;
margin-top:24px;
margin-right:26px;
padding-top:3px;
padding-bottom:2px;
border-width: 2px;
border-style: solid;
border-color: #333333;
-moz-border-radius: 3px;
border-radius: 3px;
background: #333333;
background-image: -moz-linear-gradient(#333333, #1e1e1e);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1e1e1e),color-stop(1, #333333));
}
搜索盒#搜寻{
font: bold 14px Arial, Helvetica;
color: #808080;
width:100px;
position:relative;
left:3px;
top:-5px;
background: #333333;
background-image: -moz-linear-gradient(#313131, #202020);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #202020),color-stop(1, #313131));
border:0px;
}
搜索盒#submit {
margin:0px;
padding:0px;
border:0px;
width:21px;
height:20px;
margin-right:3px;
}
答
的问题是输入得到一个display:block
风格,同时动画是怎么回事,然后返回到display:inline
。
我无法测试解决方案,但我会先尝试浮动文本框。只需float:left
的文本框(您可能需要相对定位表单元素..不确定)。
+0
做到了!我必须尝试过其他的浮动/定位组合......谢谢! – Cail 2011-06-11 14:43:43
答
不能保证,这是问题的根源,但要尽量避免包裹周围0:
#searchBox {
white-space: nowrap;
}
我知道这不是相关的,但它是一个很好的提示:把你的整个页面放在div中,它具有恒定的宽度,并且居中,所以当页面重新调整大小时,它不会移动所有元素 – Omer 2011-06-11 13:19:18