2

如何使用 CSS 制作具有 3 列的 Web 表单？在上面的示例中，所有元素都仅放置在单个列中。

<html>
<head>
<style>
        /* ----------- My Form ----------- */
        .myform{
            margin:0 auto;
            padding:14px;
        }
        #stylized{
            border-width:1px;
            border-style:solid;
            border-color:#b7ddf2;
            background:#ebf4fb;
        }
        #stylized h1 {
            font-size:14px;
            font-weight:bold;
            margin-bottom:8px;
            border-width:1px;
            border-style:solid;
            border-color:#b7ddf2;
            padding-bottom:10px;
        }
    #stylized label{
        font-size:11px;
        font-weight:bold;
        text-align:right;
    }
    #stylized input{
        font-size:11px;
        padding:4px 2px;
        border:solid 1px #aacfe4;
        width:70px;
        margin:2px 0 20px 10px;
        display: block;
    }
        /* --------- End of Form --------- */

</style>
</head>
<body>    
            <div id="stylized" class="myform">
                <form id="form" name="form" method="post" action="index.html">
                <h1>Data</h1>
                <label>Name: </label>
                <input type="text" name="name" id="name"/>
                <label>Email: </label>
                <input type="text" name="email" id="email"/>
                <label>Password: </label>
                <input type="text" name="password" id="password"/>
                </form>
            </div>
</body>
</html>
4

4 回答 4

4
于 2012-04-27T11:50:27.067 回答
1

您可以将其用于所有表单，或者如果您想以特定表单执行此操作，则可以使用类或 id 定义 css 名称。 

   form div 
    {
         display: inline;
         width: 33%;
         float: left;
    }
于 2012-04-27T11:56:21.950 回答
1

嘿，你可以用display:inline-block;

HTML

<div id="stylized" class="myform">
    <form id="form" name="form" method="post" action="index.html">
        <h1>Data</h1>
        <div class="column">
            <label >Name:
            <input type="text" name="name" id="name"/></label>
        </div>
        <div class="column">
            <label>Email:
            <input type="text" name="email" id="email"/></label>
        </div>
        <div class="column">
            <label>Password:
            <input type="text" name="password" id="password"/></label>
        </div>
    </form>
</div>

CSS

.column
{
    display: inline-block;
    margin-left: 23px;
    vertical-align: top;

}
.column + .column{
margin-left:25px;
}

现场演示http://jsfiddle.net/bfZR4/2/

于 2012-04-27T11:58:12.793 回答
1

把每个3 fields in a div with id section. 进而each of field in a div havin class subsection

<html>
<head>
<style>
        /* ----------- My Form ----------- */
        .myform{
            margin:0 auto;
            padding:14px;
        }
        #stylized{
            border-width:1px;
            border-style:solid;
            border-color:#b7ddf2;
            background:#ebf4fb;
        }
        #stylized h1 {
            font-size:14px;
            font-weight:bold;
            margin-bottom:8px;
            border-width:1px;
            border-style:solid;
            border-color:#b7ddf2;
            padding-bottom:10px;
        }
    #stylized label{
        font-size:11px;
        font-weight:bold;
        text-align:right;
    }
    #stylized input{
        font-size:11px;
        padding:4px 2px;
        border:solid 1px #aacfe4;
        width:70px;
        margin:2px 0 20px 10px;
        display: block;
    }
    #section{
        width:100%;
        padding: 10px;
    }
    .subsection{
        width:30%;
        margin:0px 5px 0px 5px;
        float: left;
    }

        /* --------- End of Form --------- */

</style>
</head>
<body>    
            <div id="stylized" class="myform">
                <form id="form" name="form" method="post" action="index.html">
                <h1>Data</h1>
                <div id="section">
                <div class="subsection">
                <label>Name: </label>
                <input type="text" name="name" id="name"/>
                </div>
                <div class="subsection">
                <label>Email: </label>
                <input type="text" name="email" id="email"/>
                </div>
                <div class="subsection">
                <label>Password: </label>
                <input type="text" name="password" id="password"/>
                </div>
                </form>
            </div>
            </div>
</body>
</html>

谢谢

于 2012-04-27T12:01:02.833 回答