如何在不使用表格的情況下格式化HTML表格

.formlabel{ 
    clear:left; 
    display:block; 
    float:left; 
    margin:0 0 1em 0; 
    padding:0 0.5em 0 0; 
    text-align:right; 
    width:8em; 
} 

.forminput{ 
    float:left; 
    margin:0 0.5em 0.5em 0; 
} 

.formwarning{ 
    clear:left; 
    float:left; 
    margin:0 0.5em 1em 0; 
}

下面是示出各種輸入類型的示例，並且根據需要，可以隱藏或樣式的額外驗證消息的示例HTML形式：

<fieldset><legend>Details</legend> 
    <label for="name" class="formlabel">Name</label> 
     <input id="name" name="name" type="text" class="forminput" /> 
     <div class="formwarning">Validation error message</div> 

    <label for="dob_year" class="formlabel">DOB</label> 
     <div class="forminput"> 
     <input id="dob_year" name="dob_year" type="text" size="4" />/
     <input id="dob_month" name="dob_month" type="text" size="2" />/
     <input id="dob_day" name="dob_day" type="text" size="2" /> 
     </div> 

    <label class="formlabel">Sex</label> 
     <label for="female" class="forminput">Female</label> 
     <input id="female" name="sex" type="radio" class="forminput" /> 
     <label for="male" class="forminput">Male</label> 
     <input id="male" name="sex" type="radio" class="forminput" /> 

    <label for="state" class="formlabel">State</label> 
     <select id="state" name="state" class="forminput"> 
     <option>ACT</option> 
     <option>New South Wales</option> 
     <option>Northern Territory</option> 
     <option>Queensland</option> 
     <option>South Australia</option> 
     <option>Tasmania</option> 
     <option>Victoria</option> 
     <option>Western Australia</option> 
     </select> 

    <label for="deadseal" class="formlabel">Death certificate</label> 
     <input id="deadseal" name="deadseal" type="file" class="forminput" /> 
</fieldset>

在上面的例子中，DOB確實有一個額外的<div>混亂的事情。如果您在需要時將日期斜槓作爲:after僞元素的一部分進行設置，則可以將其刪除。

原來還好在Opera 11.60，Firefox的11，谷歌Chrome 18和Internet Explorer 8

來源

2012-04-16 18:46:38 random

HTML

<form> 
<div id="personal_name"> 
<label>Name</label> 
<input name="name" /> 
</div> 
</form>

CSS

form 
{display: table} 
#personal_name 
{display: table-row} 
#personal_name input, #personal_name label 
{display: table-cell}

我認爲這是足夠。

來源

2016-03-06 08:22:18 Walkinraven

相關問題

如何在不使用表格的情況下格式化HTML表格

回答

相關問題