CSS中,文本框包含按鈕是一個常見的設(shè)計需求。而想實現(xiàn)這種需求,我們需要使用HTML中的textarea標(biāo)簽和button標(biāo)簽,并運用CSS對它們進行樣式布局,即可實現(xiàn)簡單的文本框包含按鈕的功能。
<div class="input-container"> <textarea rows="4" cols="50" placeholder="請輸入內(nèi)容"></textarea> <button>發(fā)送</button> </div>
首先,我們通過HTML的div標(biāo)簽創(chuàng)建一個輸入框容器,并在容器內(nèi)放置textarea標(biāo)簽和button標(biāo)簽。textarea標(biāo)簽用于輸入文本內(nèi)容,而button標(biāo)簽則是一個按鈕,用于發(fā)送輸入的內(nèi)容。
.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對容器和標(biāo)簽進行樣式設(shè)置。對于容器,我們使用inline-block將其顯示為內(nèi)聯(lián)塊元素,并設(shè)置其position為relative,以使后面我們對button標(biāo)簽設(shè)置的絕對定位能夠達到效果。對于textarea標(biāo)簽,我們設(shè)置其width為100%以使其與容器寬度相等,設(shè)置padding、border-radius等屬性以讓其樣式更美觀。而對于button標(biāo)簽,我們使用絕對定位將其位于textarea標(biāo)簽上方并右對齊,以使其看起來像是容器的一部分。
通過以上設(shè)置,我們便可以實現(xiàn)簡單的文本框包含按鈕的功能了。