2

CSS を使用して 3 列の Web フォームを作成するには? 上記の例では、すべての要素が 1 つの列に配置されています。

<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 に答える