響應HTML形式與我使用這個CSS代碼標籤

：響應HTML形式與我使用這個CSS代碼標籤

form > div { 
    clear: both; 
    overflow: hidden; 
    padding: 1px; 
    margin: 0 0 0 0; 
} 
form > div > div { 
    margin: 0 0 0 0; 
} 
form > div > label { 
    width: 25%; 
    float: left; 
    padding-right: 10px; 
} 
form > div > div { 
    width: 75%; 
    float: right; 
} 
form > div > label { 
    font-size: 90%; 
} 

input[type=text], 
input[type=email], 
input[type=url], 
input[type=tel], 
input[type=password], 
textarea { 
    width: 60%; 
} 

input[type=text], 
input[type=email], 
input[type=url], 
input[type=tel], 
input[type=password], 
textarea, 
select { 
    height:35px; 
    padding:5px; 
    color:#F36F25; 
    font-size:16px; 
    border: 1px solid #F36F25; 
} 

input[type=text]:focus, 
input[type=email]:focus, 
input[type=url]:focus, 
input[type=password]:focus, 
textarea:focus { 
    outline: 0; 
    border-color: #F36F25; 
    font-weight:bold; 
} 

@media (max-width: 600px) { 
    form > div { 
    margin: 0 0 15px 0; 
    } 
    form > div > label { 
     width: 100%; 
    float: none; 
    margin: 0 0 5px 0; 
    } 
    form > div > div { 
    width: 100%; 
    float: none; 
    } 
    input[type=text], 
    input[type=email], 
    input[type=url], 
    input[type=password], 
    textarea, 
    select { 
    width: 100%; 
    } 
} 
@media (min-width: 1200px) { 
    form > div > label { 
    text-align: right; 
    } 
}

使用標籤來創建一個負責任的HTML表單，它的工作不錯，但林不知道如何使標籤和水平，內聯形成元素表單元素似乎顯示比標籤

http://jsfiddle.net/17h5da97/

來源

2014-12-04 user2710234

你的CSS更改爲以下：

form > div > label { 
    width: 24%; 
    vertical-align: middle; 
    display: inline-block; 
} 

form > div > div { 
    width: 75%; 
    display: inline-block; 
}

Updated fiddle

來源

2014-12-04 11:23:55 Morpheus

謝謝你 - 偉大工程。我在這裏更新了它 - http://jsfiddle.net/17h5da97/8/ - 我如何使標籤在中間垂直顯示？ – user2710234 2014-12-04 11:39:27

在更新的例子中它們不在中間嗎？ http://jsfiddle.net/17h5da97/6/ – Morpheus 2014-12-04 11:46:58

是的 - 我增加了一個高度進入形式> div>標籤導致的問題。謝謝！:) – user2710234 2014-12-04 11:52:24

下標籤元件上卸下padding：

form > div > label { 
    width: 25%; 
    float: left; 
    /* padding-right: 10px; */ 
}

來源

2014-12-04 11:19:20 epoch

您已將標籤浮動到您的css中 - 您還需要將表單輸入向左浮動以使它們並排顯示。要做到這一點，添加下面的CSS規則：

form > div > select{ 
float: left; 
}

來源

2014-12-04 11:22:19 user1578653

兩個選項：

你可以把它們放到DIV中：

<div> 
    <label for="title">Title</label> 
    <select name="title"> 
     <option value="Mr" <?php if($contact["title"] == 'Mr') { echo "selected='selected'"; } ?>>Mr</option> 
     <option value="Mrs" <?php if($contact["title"] == 'Mrs') { echo "selected='selected'"; } ?>>Mrs</option> 
     <option value="Miss" <?php if($contact["title"] == 'Miss') { echo "selected='selected'"; } ?>>Miss</option> 
     <option value="Ms" <?php if($contact["title"] == 'Ms') { echo "selected='selected'"; } ?>>Ms</option> 
    </select> 
<div>

http://jsfiddle.net/17h5da97/1/

或者刪除浮動權：

form > div > div { 
    margin: 0 0 0 0; 
    width: 75%; 
}

http://jsfiddle.net/17h5da97/4/

或者刪除標籤的填充：

form > div > label { 
    width: 25%; 
    float: left; 
    padding-right: 10px; 
}

http://jsfiddle.net/17h5da97/5/

來源

2014-12-04 11:23:24

這個我因爲你必須在標籤上邊距：

form > div > label { 
    width: 25%; 
    float: left; 
    padding-right: 10px; // <--- padding 
}

爲標籤和輸入div的有比例合計達100％，這將破壞寬度，使DIV下拉。

嘗試從其他兩個方面採取寬度inpercentages並加入這填充的百分比填充，如：

form > div > label { 
    width: 25%; 
    float: left; 
    padding-right: 5%; 
}

與輸入格70％的寬度。

像這樣：http://jsfiddle.net/lee_gladding/17h5da97/7/

來源

2014-12-04 11:24:07

在標籤部分

/*float: left; */ 

margin: 0 auto;

來源

2014-12-04 11:30:29 MajorTennis

響應HTML形式與我使用這個CSS代碼標籤

回答

相關問題