網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好

多行文本框怎麼設置寬度

欄目: 互聯網 / 發佈於: / 人氣:5.75K

多行文本框是HTML網頁裏的一個基本的控件,主要是用來給用户輸入信息的,由於這個控件是多行的,因此可以輸入較多的信息,且能夠換行輸入。下面我們就來看一下怎麼設置這個控件的寬度。

操作方法

(01)首先我們在html代碼裏先輸入一個textarea控件,也就是多行文本框。

多行文本框怎麼設置寬度

(02)運行頁面後,可以看到現在的多行文本框也就是按瀏覽器默認的寬度來顯示的。

(03)要設置多行文本框的寬度,我們可以使用cols屬性來設置。代碼如圖。

(04)這時我們再看下頁面,可以發現現在多行文本框的寬度變寬了。

(05)但上面的方法,並不能準確的設置到多行文本框的寬度,並不能準確到像素級別的設置,所以我們最方便的方法還是使用樣式來設置。我們先為這個控件添加一個樣式名,如圖

(06)然後再在代碼裏添加上對應的樣式代碼,在這裏我們設置控件的高度和寬度,其中寬度設置為300像素。

多行文本框怎麼設置寬度 第2張

(07)刷新頁面,就可以目的地到效果了,可以看到現在的多行文本框的寬度變寬了,也完完整整是300像素的寬度。

多行文本框怎麼設置寬度 第3張