这就是我的输入和按钮的样子。 CSS代码如下所示:
button._searchfrontpage
{
margin: 0 auto;
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
}
.sp-module_searchfrontpage input[type="text"] {
background: #f0dbc5;
height: 53px;
width: 50%;
margin: 0 auto;
border-radius: 6px;
margin-bottom: 40px;
line-height: normal;
color: #444;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
}
我似乎想办法将灰色按钮拖到输入框的右侧。是否有人可以让我想出一个想法?
编辑:执行@Jai给我的代码后,它看起来很好,但是当我使浏览器变小时,它就会脱离它的位置,看起来像这样:显然就是这样,因为输入宽度是50%。那有什么解决方案吗?
答案 0 :(得分:2)
对于你的div:
.sp-module_searchfrontpage{
/* other CSS as is*/
position: relative;
}
现在按钮:
button._searchfrontpage {
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
/* add these properties */
position: absolute;
top:0;
right:0;
z-index:100; /* <=====choose the correct value*/
}
但是你必须确保父div与输入和按钮的高度相同并相对定位。
如果不可能,那么你可以用标签将它们包装到另一个div或更好的中,并使用输入和按钮的相同高度属性设置它,但div仍然需要相对位置,按钮应该绝对定位。我会用标签来做:
<label>
<input type="text" />
<button>search</button>
</label>
然后在CSS中:
.sp-module_searchfrontpage label{
width: 100%;
height: 53px;
position: relative;
}
button._searchfrontpage {
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
/* add these properties */
position: absolute;
top:0;
right:0;
z-index:100; /* <=====choose the correct value*/
}