CSS中,文本框包含按鈕是一個常見的設計需求。而想實現這種需求,我們需要使用HTML中的textarea標簽和button標簽,并運用CSS對它們進行樣式布局,即可實現簡單的文本框包含按鈕的功能。
<div class="input-container"> <textarea rows="4" cols="50" placeholder="請輸入內容"></textarea> <button>發送</button> </div>
首先,我們通過HTML的div標簽創建一個輸入框容器,并在容器內放置textarea標簽和button標簽。textarea標簽用于輸入文本內容,而button標簽則是一個按鈕,用于發送輸入的內容。
.input-container { display: inline-block; position: relative; } textarea { width: 100%; padding: 10px; border-radius: 5px 0 0 5px; border: 1px solid #ccc; resize: none; outline: none; } button { position: absolute; top: 0; right: 0; height: 100%; padding: 10px; background: #ccc; color: #fff; border: none; border-radius: 0 5px 5px 0; cursor: pointer; }
接下來,我們通過CSS對容器和標簽進行樣式設置。對于容器,我們使用inline-block將其顯示為內聯塊元素,并設置其position為relative,以使后面我們對button標簽設置的絕對定位能夠達到效果。對于textarea標簽,我們設置其width為100%以使其與容器寬度相等,設置padding、border-radius等屬性以讓其樣式更美觀。而對于button標簽,我們使用絕對定位將其位于textarea標簽上方并右對齊,以使其看起來像是容器的一部分。
通過以上設置,我們便可以實現簡單的文本框包含按鈕的功能了。
上一篇mysql最大連接數語句
下一篇css中文標簽嗎