欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css中文本框包含按鈕

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

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標簽上方并右對齊,以使其看起來像是容器的一部分。

通過以上設置,我們便可以實現簡單的文本框包含按鈕的功能了。