如何在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*/ 
}