我得到了一个用 JavaScript、HTML 和 CSS 编写的代码,关于一个“名称”字段和“值”字段水平对齐的表单,然后我得到了一个将添加字段的 JS 代码。
当我添加一个字段时,问题就开始了,添加的字段是垂直的,我希望它像我的第一个表单一样是水平的。这是我的代码。
<script>
var counter = 1;
var limit = 8;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newName = document.createElement('div');
newName.innerHTML = "Name " + "<input type='text' name='myName[]'>";
document.getElementById(divName).appendChild(newName);
var newValue = document.createElement('div');
newValue.innerHTML = "Value " + "<select name='myValue[]' ><option value='1 '>1</option></select>";
document.getElementById(divName).appendChild(newValue);
}
}
</script>
<div class="form-style-6" id="dynamicField">
<h1>Case Number</h1>
<form method="post" action="getpost.php">
Name<input type="text" name="myName[]" placeholder="Name" />
Value<select name="myValue[]">
<option value="Excellent ">Excellent</option>
<option value="Good ">Good</option>
<option value="Ok ">Ok</option>
<option value="Poor">Poor</option>
<option value="Bad">Bad</option>
</select>
</div>
<div class="form-style-6">
<input type="button" value="Add Fields" onClick="addInput('dynamicField');">
<input type="submit" value="Send" />
</div>
</form>
以防万一。这是我的 CSS:
.form-style-6{
font: 95% Arial, Helvetica, sans-serif;
max-width: 600px;
margin: 10px auto;
padding: 16px;
background: #F7F7F7;
}
.form-style-6 h1{
background: #43D1AF;
padding: 20px 0;
font-size: 140%;
font-weight: 300;
text-align: center;
color: #fff;
margin: -16px -16px 16px -16px;
}
.form-style-6 input[type="text"],
.form-style-6 select
{
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 39%;
background: #fff;
margin-bottom: 4%;
margin-left: 0.2%;
border: 1px solid #ccc;
padding: 3%;
padding-left: 3%;
color: #555;
font: 95% Arial, Helvetica, sans-serif;
float:center;
}
.form-style-6 input[type="text"]:focus,
.form-style-6 input[type="date"]:focus,
.form-style-6 input[type="datetime"]:focus,
.form-style-6 input[type="email"]:focus,
.form-style-6 select:focus
{
box-shadow: 0 0 5px #43D1AF;
padding: 3%;
border: 1px solid #43D1AF;
}
.form-style-6 input[type="submit"],
.form-style-6 input[type="button"]{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 3%;
background: #43D1AF;
border-bottom: 2px solid #30C29E;
border-top-style: none;
border-right-style: none;
border-left-style: none;
color: #fff;
}
.form-style-6 input[type="submit"]:hover,
.form-style-6 input[type="button"]:hover{
background: #2EBC99;
}
最佳答案
您可以添加 display: inline-block
,这将使标签和输入字段垂直对齐。
label, input {
display: inline-block;
vertical-align: baseline;
width: 125px;
}
关于JavaScript 对齐附加字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29912694/