欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML如何對齊多個表單中的文本框的實現(xiàn)

  發(fā)布時間:2020-06-18 16:57:00   作者:GorgeousChou   我要評論
這篇文章主要介紹了HTML如何對齊多個表單中的文本框的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

表單代碼如圖,還沒有加入樣式表,表單沒有對齊,比較難看,但是HTML又沒有提供表單對齊的標簽或功能。

html源代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>massage-board</title>
</head>
<body>
    <form action="board.php">
        <fieldset>
        <p>
            <label for="title" >title:</label>
            <input type="text" id="title" name="title" align="left">
        </p>
        <p>
            <label for="username">username:</label>
            <input type="text" id="username" name="username" align="left">
        </p>
        <p>
            <label for="messageContent">message content:</label>
            <textarea id="messageContent" name="messageContent" cols="40" rows="5" align="left"></textarea>
        </p>
        <p>
            <input type="submit">
        </p>
        </fieldset>
    </form>
</body>
</html>

表單顯示效果圖片:

 

為了使表單對齊,在HTML中添加如下CSS代碼,表單即可對齊:

<style>
        fieldset{
            background-color: #f1f1f1;
            border: none;
            border-radius: 2px;
            margin-bottom: 12px;
            overflow: hidden;
            padding: 0 .625em;
        }

        label{
            cursor: pointer;
            display: inline-block;
            padding: 3px 6px;
            text-align: right;
            width: 150px;
            vertical-align: top;
        }

        input{
            font-size: inherit;
        }
    </style>

添加樣式表之后的表單顯示效果

 

實現(xiàn)表單對齊的CSS代碼段如下:

        label{
            cursor: pointer;
            display: inline-block;
            padding: 3px 6px;
            text-align: right;
            width: 150px;
            vertical-align: top;
        }

假設(shè)每個表單的父元素為<p>標簽,<label>標簽為表單的描述,也就是文本框左邊的文字,<input>標簽為文本框。為了使標簽對齊,只需要設(shè)置label標簽中的width寬度為一定值即可,比如本例中為150px,因為label標簽和input標簽同屬于p標簽,他們是從左到右顯示的,指定了label標簽的長度,即可使表單的文本框?qū)R。

到此這篇關(guān)于HTML如何對齊多個表單中的文本框的實現(xiàn)的文章就介紹到這了,更多相關(guān)HTML對齊多表單中的文本框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

相關(guān)文章

  • wordpress添加Html5的表單驗證required方法小結(jié)

    這篇文章主要介紹了wordpress添加Html5的表單驗證required方法小結(jié),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參
    2020-08-18
  • html表單控件禁用屬性readonly VS disabled介紹

    這篇文章主要介紹了html表單控件禁用屬性readonly VS disabled區(qū)別,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-04-13
  • HTML5表單驗證特性(知識點小結(jié))

    這篇文章主要介紹了HTML5表單驗證特性的一些知識點,本文通過實例代碼截圖的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-03-10
  • html中表單提交的實現(xiàn)

    表單提交是常見的一種操作,這篇文章主要介紹了html中表單提交的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-06
  • HTML通過表單實現(xiàn)酒店篩選功能

    本文通過實例代碼給大家分享基于HTML通過表單實現(xiàn)酒店篩選功能,代碼真的很簡答,對大家學習html表單相關(guān)知識有很大的幫助,對html酒店篩選相關(guān)知識,感興趣的朋友一起看看
    2021-05-17

最新評論