色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css中文本框包含按鈕

錢瀠龍2年前12瀏覽0評論

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)簡單的文本框包含按鈕的功能了。