Question

这就是我的输入和按钮的样子。 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％。那有什么解决方案吗？

Answer 1

对于你的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*/
}

如何在joomla中添加输入内部的按钮

1 个答案: