Html CSS使表单的每个部分水平放置？_Html_Css

Html CSS使表单的每个部分水平放置？

html css

Html CSS使表单的每个部分水平放置？,html,css,Html,Css,我似乎找不到一种方法来制作css，将长表单分成块，并将它们水平放置在页面上。现在它是一个垂直的表单，我必须向下滚动才能看到底部部分，所以我在想是否可以将每个部分水平放置在页面上。我该怎么做 CSS代码： <style type="text/css"> html, body, h1, form, fieldset, legend, ol { margin: 0; padding: 0; } body { background: #FC0; color:

我似乎找不到一种方法来制作css，将长表单分成块，并将它们水平放置在页面上。现在它是一个垂直的表单，我必须向下滚动才能看到底部部分，所以我在想是否可以将每个部分水平放置在页面上。我该怎么做

CSS代码：

<style type="text/css">
html, body, h1, form, fieldset, legend, ol {
    margin: 0;
    padding: 0;
}
body {
    background: #FC0;
    color: #111111;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    padding: 20px;
}

/*Form Steps Counter*/
form#newcust > fieldset > legend:before {
    content: "Step " counter(fieldsets) ": ";
    counter-increment: fieldsets;
}
/*Form*/
form#newcust {
    background: #9cbc2c;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding: 20px;
    margin-left: 25%;
    margin-right:25%;
    width: 400px;

}

/*Fieldset*/
form#newcust fieldset {
    border: none;
    margin-bottom: 10px;

}
form#newcust fieldset:last-of-type {
    margin-bottom: 0;
}

/*Legend*/
form#newcust legend {
    color: #384313;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 10px;
    text-shadow: 0 1px 1px #c0d576;
}

form#newcust ol li {
    background: #b9cf6a;
    border-color: #e3ebc3;
    border-style: solid;
    border-width: 2px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 2px;
}
form#newcust ol ol li {
    background: none;
    border: none;
    float: left;
}

form#newcust label {
    float: left;
    font-size: 12px;
    width: 150px;
}
form#newcust fieldset fieldset label {
    background:none no-repeat left 50%;
    line-height: 20px;
    padding: 0 0 0 30px;
    width: auto;
}
form#newcust fieldset fieldset label:hover {
    cursor: pointer;
}

/*Input*/
form#newcust input:not([type=radio]),
form#newcust textarea {
    background: #ffffff;
    border: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    font: 14px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    outline: none;
    padding: 3px;
    width: 200px;
}
form#newcust input:not([type=submit]):focus,
form#newcust textarea:focus {
    background: #eaeaea;
}
form#newcust input[type=radio] {
    float: left;
    margin-right: 5px;
}
form#newcust button {
    background: #384313;
    border: none;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -khtml-border-radius: 12px;
    border-radius: 12px;
    color: #ffffff;
    display: block;
    font: 16px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    margin: auto;
    padding: 5px 15px;
    text-shadow: 0 1px 1px #000000;
    text-transform: uppercase;
}
form#newcust button:hover {
    background: #1e2506;
    cursor: pointer;
}
</style>

<body>
<form id=newcust method="POST" action="newcust.php" enctype="multipart/form-data">
    <fieldset>
        <legend>Date</legend>
        <ol><li>
                <label for=purchase_date>Purchase Date:</label>
                <input id=purchase_date name=purchase_date type=date placeholder="Debenture's Purchase Date" required autofocus><br></li>
                <li><label for=mature>Maturity Date:</label>
                <input id=mature_date name=mature_date type=date placeholder="Debenture's Maturity Date" required><br></li>         
        </ol>
    </fieldset>

    <fieldset>
        <legend>General Information</legend>
        <ol>
                <li><label for=sub_id>Subscription No.:</label>
                <input id=sub_id name=sub_id required><br></li>
                <li><label for=cert_id>Certificate No.:</label>
                <input id=cert_id name=cert_id type=text required><br></li>
                <li><label for=amount>Principle:</label>
                <input id=amount name=amount type=text required><br></li>
                <li><label for=unit>Unit:</label>
                <input id=unit name=unit type=text required><br></li>
        </ol>
    </fieldset>
    <fieldset>
        <legend>Purchaser Information</legend>
        <ol>            
                <li><label for=purchaser_first>Purchaser First Name:</label>
                <input id=purchaser_first name=purchaser_first type=text required><br></li>
                <li><label for=purchaser_last>Purchaser Last Name:</label>
                <input id=purchaser_last name=purchaser_last type=text required><br></li>
                <li><label for=purchaser_id>Purchaser ID No.:</label>
                <input id=purchaser_id name=purchaser_id type=text  required><br></li>
                <li><label for=purchaser_no>Purchaser Phone No.:</label>
                <input id=purchaser_no name=purchaser_no type=text required><br></li>
                <li><label for=purchaser_add>Purchaser Address:</label>
                <textarea id=purchaser_add name=purchaser_add rows=5 required></textarea>
                <br></li>
        </ol>
    </fieldset>
    <fieldset>
        <legend>Beneficiary Information</legend>
        <ol>            
                <li><label for=beneficiary_first>Beneficiary First Name:</label>
                <input id=beneficiary_first name=beneficiary_first type=text required><br></li>
                <li><label for=beneficiary_last>Beneficiary Last Name:</label>
                <input id=beneficiary_last name=beneficiary_last type=text required><br></li>
                <li><label for=beneficiary_id>Beneficiary ID No.:</label>
                <input id=beneficiary_id name=beneficiary_id type=text required><br></li>
                <li><label for=beneficiary_no>Beneficiary Phone No.:</label>
                <input id=beneficiary_no name=beneficiary_no type=text required><br></li>
                <li><label for=beneficiary_add>Beneficiary Address:</label>
                <textarea id=beneficiary_add name=beneficiary_add rows=5 required></textarea><br></li>
        </ol>
    </fieldset>

        <fieldset>
        <legend>Bank Information</legend>
        <ol>            
                <li><label for=bank_acc_name>Bank Account Name:</label>
                <input id=bank_acc_name name=bank_acc_name type=text required><br></li>
                <li><label for=bank_acc_no>Bank Account No.:</label>
                <input id=bank_acc_no name=bank_acc_no type=text required><br></li>
                <li><label for=bank_swift>Bank Swift Code:</label>
                <input id=bank_swift name=bank_swift type=text required><br></li>
                <li><label for=bank_name>Bank Name:</label>
                <input id=bank_name name=bank_name type=text required><br></li>
                <li><label for=bank_no>Bank Phone No.:</label>
                <input id=bank_no name=bank_no type=text required><br></li>
                <li><label for=bank_add>Bank Address:</label>
                <textarea id=bank_add name=bank_add rows=5 required></textarea><br></li>
        </ol>
    </fieldset>
    <fieldset>
    <br>
        <button type=submit>Submit</button>
    </fieldset>
</form>
</body>
</html>


html、正文、h1、表单、字段集、图例、ol{
保证金：0；
填充：0；
}
身体{
背景#FC0；
颜色：#111111；
字体系列：“Gill Sans”、“Gill Sans MT”、“Myriad Pro”、“DejaVu Sans Condensed”、Helvetica、Arial、Sans serif；
填充：20px；
}
/*窗体步数计数器*/
表单#newcust>字段集>图例：之前{
内容：“步骤”计数器（字段集）：“；
计数器增量：字段集；
}
/*形式*/
表格#newcust{
背景：#9cbc2c；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
填充：20px；
左边缘：25%；
右边距：25%；
宽度：400px；
}
/*字段集*/
表单#newcust字段集{
边界：无；
边缘底部：10px；
}
表单#newcust字段集：类型的最后一个{
页边距底部：0；
}
/*传奇*/
表格#纽卡斯特传奇{
颜色：#384313；
字体大小：14px；
字体大小：粗体；
垫底：10px；
文本阴影：0 1px 1px#c0d576；
}
表格#newcust ol li{
背景：#b9cf6a；
边框颜色：#e3ebc3；
边框样式：实心；
边框宽度：2倍；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
线高：30px；
列表样式：无；
填充物：5px10px；
边缘底部：2px；
}
表格#newcust ol li{
背景：无；
边界：无；
浮动：左；
}
表格#新客户标签{
浮动：左；
字体大小：12px；
宽度：150px；
}
表单#newcust字段集字段集标签{
背景：无重复左50%；
线高：20px；
填充：0 30px；
宽度：自动；
}
表单#newcust字段集字段集标签：悬停{
光标：指针；
}
/*输入*/
表单#newcust输入：非（[type=radio]），
表格#新客户文本区{
背景：#ffffff；
边界：无；
-moz边界半径：3px；
-webkit边界半径：3px；
-khtml边界半径：3px；
边界半径：3px；
字体：14px“Gill Sans”、“Gill Sans MT”、“Myriad Pro”、“DejaVu Sans Condensed”、Helvetica、Arial、Sans serif；
大纲：无；
填充：3倍；
宽度：200px；
}
表单#newcust输入：不（[type=submit]）：焦点，
表单#newcust文本区域：焦点{
背景：#eaeaea；
}
表格#新客户输入[类型=无线电]{
浮动：左；
右边距：5px；
}
表单#新建客户按钮{
背景#384313；
边界：无；
-moz边界半径：12px；
-webkit边界半径：12px；
-khtml边界半径：12px；
边界半径：12px；
颜色：#ffffff；
显示：块；
字体：16px“Gill Sans”、“Gill Sans MT”、“Myriad Pro”、“DejaVu Sans Condensed”、Helvetica、Arial、Sans serif；
字母间距：1px；
保证金：自动；
填充：5px15px；
文本阴影：0 1px 1px#000000；
文本转换：大写；
}
表单#newcust按钮：悬停{
背景：#1e2506；
光标：指针；
}

HTML代码：

<style type="text/css">
html, body, h1, form, fieldset, legend, ol {
    margin: 0;
    padding: 0;
}
body {
    background: #FC0;
    color: #111111;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    padding: 20px;
}

/*Form Steps Counter*/
form#newcust > fieldset > legend:before {
    content: "Step " counter(fieldsets) ": ";
    counter-increment: fieldsets;
}
/*Form*/
form#newcust {
    background: #9cbc2c;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding: 20px;
    margin-left: 25%;
    margin-right:25%;
    width: 400px;

}

/*Fieldset*/
form#newcust fieldset {
    border: none;
    margin-bottom: 10px;

}
form#newcust fieldset:last-of-type {
    margin-bottom: 0;
}

/*Legend*/
form#newcust legend {
    color: #384313;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 10px;
    text-shadow: 0 1px 1px #c0d576;
}

form#newcust ol li {
    background: #b9cf6a;
    border-color: #e3ebc3;
    border-style: solid;
    border-width: 2px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 2px;
}
form#newcust ol ol li {
    background: none;
    border: none;
    float: left;
}

form#newcust label {
    float: left;
    font-size: 12px;
    width: 150px;
}
form#newcust fieldset fieldset label {
    background:none no-repeat left 50%;
    line-height: 20px;
    padding: 0 0 0 30px;
    width: auto;
}
form#newcust fieldset fieldset label:hover {
    cursor: pointer;
}

/*Input*/
form#newcust input:not([type=radio]),
form#newcust textarea {
    background: #ffffff;
    border: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    font: 14px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    outline: none;
    padding: 3px;
    width: 200px;
}
form#newcust input:not([type=submit]):focus,
form#newcust textarea:focus {
    background: #eaeaea;
}
form#newcust input[type=radio] {
    float: left;
    margin-right: 5px;
}
form#newcust button {
    background: #384313;
    border: none;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -khtml-border-radius: 12px;
    border-radius: 12px;
    color: #ffffff;
    display: block;
    font: 16px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    margin: auto;
    padding: 5px 15px;
    text-shadow: 0 1px 1px #000000;
    text-transform: uppercase;
}
form#newcust button:hover {
    background: #1e2506;
    cursor: pointer;
}
</style>

<body>
<form id=newcust method="POST" action="newcust.php" enctype="multipart/form-data">
    <fieldset>
        <legend>Date</legend>
        <ol><li>
                <label for=purchase_date>Purchase Date:</label>
                <input id=purchase_date name=purchase_date type=date placeholder="Debenture's Purchase Date" required autofocus><br></li>
                <li><label for=mature>Maturity Date:</label>
                <input id=mature_date name=mature_date type=date placeholder="Debenture's Maturity Date" required><br></li>         
        </ol>
    </fieldset>

    <fieldset>
        <legend>General Information</legend>
        <ol>
                <li><label for=sub_id>Subscription No.:</label>
                <input id=sub_id name=sub_id required><br></li>
                <li><label for=cert_id>Certificate No.:</label>
                <input id=cert_id name=cert_id type=text required><br></li>
                <li><label for=amount>Principle:</label>
                <input id=amount name=amount type=text required><br></li>
                <li><label for=unit>Unit:</label>
                <input id=unit name=unit type=text required><br></li>
        </ol>
    </fieldset>
    <fieldset>
        <legend>Purchaser Information</legend>
        <ol>            
                <li><label for=purchaser_first>Purchaser First Name:</label>
                <input id=purchaser_first name=purchaser_first type=text required><br></li>
                <li><label for=purchaser_last>Purchaser Last Name:</label>
                <input id=purchaser_last name=purchaser_last type=text required><br></li>
                <li><label for=purchaser_id>Purchaser ID No.:</label>
                <input id=purchaser_id name=purchaser_id type=text  required><br></li>
                <li><label for=purchaser_no>Purchaser Phone No.:</label>
                <input id=purchaser_no name=purchaser_no type=text required><br></li>
                <li><label for=purchaser_add>Purchaser Address:</label>
                <textarea id=purchaser_add name=purchaser_add rows=5 required></textarea>
                <br></li>
        </ol>
    </fieldset>
    <fieldset>
        <legend>Beneficiary Information</legend>
        <ol>            
                <li><label for=beneficiary_first>Beneficiary First Name:</label>
                <input id=beneficiary_first name=beneficiary_first type=text required><br></li>
                <li><label for=beneficiary_last>Beneficiary Last Name:</label>
                <input id=beneficiary_last name=beneficiary_last type=text required><br></li>
                <li><label for=beneficiary_id>Beneficiary ID No.:</label>
                <input id=beneficiary_id name=beneficiary_id type=text required><br></li>
                <li><label for=beneficiary_no>Beneficiary Phone No.:</label>
                <input id=beneficiary_no name=beneficiary_no type=text required><br></li>
                <li><label for=beneficiary_add>Beneficiary Address:</label>
                <textarea id=beneficiary_add name=beneficiary_add rows=5 required></textarea><br></li>
        </ol>
    </fieldset>

        <fieldset>
        <legend>Bank Information</legend>
        <ol>            
                <li><label for=bank_acc_name>Bank Account Name:</label>
                <input id=bank_acc_name name=bank_acc_name type=text required><br></li>
                <li><label for=bank_acc_no>Bank Account No.:</label>
                <input id=bank_acc_no name=bank_acc_no type=text required><br></li>
                <li><label for=bank_swift>Bank Swift Code:</label>
                <input id=bank_swift name=bank_swift type=text required><br></li>
                <li><label for=bank_name>Bank Name:</label>
                <input id=bank_name name=bank_name type=text required><br></li>
                <li><label for=bank_no>Bank Phone No.:</label>
                <input id=bank_no name=bank_no type=text required><br></li>
                <li><label for=bank_add>Bank Address:</label>
                <textarea id=bank_add name=bank_add rows=5 required></textarea><br></li>
        </ol>
    </fieldset>
    <fieldset>
    <br>
        <button type=submit>Submit</button>
    </fieldset>
</form>
</body>
</html>


日期

购买日期：


到期日：


一般资料
认购编号：


证书编号：


原则：


单位：


购买者信息
买方姓名：


买方姓氏：


买方ID号：


买方电话号码：


买方地址：


受款人资料
受益人姓名：


受益人姓氏：


受益人身份证号码：


受益人电话号码：


受益人地址：


银行信息
银行帐户名称：


银行账号：


银行Swift代码：


银行名称：


银行电话：


银行地址：




提交

ul

和

ol

是块级元素。通过继承，
li
也是块级元素
您需要设置
float:left
来更改
li
的默认行为，以便水平放置它们。
然后将窗体
宽度
放大。同时调整单个
标签的宽度s和输入的s以匹配所需的格式。字段集{display:inline block；} ？离题：首先，您应该将HTML中的每个属性值放在引号之间，或者至少放在撇号之间。F.e.id=newcust 应该变成id=“newcust” 。第二，如果可能，将CSS放在一个单独的文件中。使您的代码更干净。关于主题：您可以使li 显示：inline ，也可以像以前那样使用float:left ，但请记住元素可以彼此相邻显示的宽度。如果你给