如何在joomla输入内添加按钮

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有相同的高度输入和按钮也和相对定位。

如果是不可能的，那么你可以用它们植入另一格或更好地与标签和风格与信号输入和按钮，但股利仍然需要相对位置和按钮应该被绝对定位的高度相同属性。我将与标签做到这一点：

<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*/ 
}