在CSS中,我們可以通過(guò)使用display: box
或者display: flex
屬性來(lái)添加多行文本框。
我們需要?jiǎng)?chuàng)建一個(gè)包含多個(gè)文本框的HTML結(jié)構(gòu),每個(gè)文本框可以是一個(gè)div
元素,并且每個(gè)div
元素都有一個(gè)***的類名或者ID。
我們可以使用CSS來(lái)設(shè)置這些文本框的布局,如果我們使用display: box
屬性,那么每個(gè)文本框會(huì)按照從上到下的順序排列,如果我們使用display: flex
屬性,那么文本框可以按照從左到右的順序排列,并且可以設(shè)置每個(gè)文本框的寬度和高度。
如果我們有3個(gè)文本框,我們可以這樣設(shè)置CSS:
.text-box-1 { width: 300px; height: 100px; border: 1px solid #000; } .text-box-2 { width: 300px; height: 100px; border: 1px solid #000; } .text-box-3 { width: 300px; height: 100px; border: 1px solid #000; } .text-boxes { display: flex; justify-content: space-between; }
在上面的CSS代碼中,我們?cè)O(shè)置了每個(gè)文本框的寬度、高度和邊框樣式,我們使用display: flex
屬性將文本框按照從左到右的順序排列,并且設(shè)置了每個(gè)文本框之間的間隔。
我們需要在HTML中使用class
或者id
來(lái)引用這些CSS樣式。
<div class="text-boxes"> <div class="text-box-1">文本框1</div> <div class="text-box-2">文本框2</div> <div class="text-box-3">文本框3</div> </div>
通過(guò)上面的HTML和CSS代碼,我們可以實(shí)現(xiàn)多行文本框的添加和布局。