我正在尝试对齐一个选择框和一个文本框,我使用javascript动态添加到表单中,但我无法让它们正确对齐。
CSS代码:
select
{
margin-top: 3px;
margin-left: 5px;
margin-bottom: 2px;
padding-left:6px;
padding-top: 3px;
width: 122px;
height: 30px;
font-family: Verdana, sans-serif;
font-size:13px;
}
input[type="text"]
{
width: 122px;
height: 30px;
padding-left:7px;
margin: 5px;
}
HTML的代码:
<form method="post" action="" id="myForm">
<input type="text" name="headline" placeholder="Headline" value="<?=$_POST['Headline']?>" autofocus required>
<textarea></textarea>
<select>
<option value='1'>option1</option>
</select>
<br>
<input name="Create" id="Create" type="submit" value="Create">
</form>
我添加额外输入字段的Javascript代码:
function AddCatchInput($id)
{
var container = document.getElementById("myForm");
var submitbutton = document.getElementById("Create");
var select = document.createElement("select");
select.setAttribute("name", "Select"+$id);
select.setAttribute("id", "Select"+$id);
select.classList.add('FishSelect');
var option;
option = document.createElement("option");
option.setAttribute("value", "1");
option.innerHTML = "name";
select.appendChild(option);
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = "Weight" + $id;
input.placeholder = "Weight";
input.classList.add('FishWeight');
container.removeChild(submitbutton);
container.appendChild(select);
container.appendChild(input);
container.appendChild(submitbutton);
}
我最终得到的是:
http://i.stack.imgur.com/IHagL.jpg
非常感谢任何帮助。
答案 0 :(得分:0)
尝试将vertical-align:top;
添加到这两个元素中。
答案 1 :(得分:0)
你可以试试这个
select
{
margin-top: 3px;
margin-left: 5px;
margin-bottom: 2px;
padding-left:6px;
padding-top: 3px;
width: 129px;
height: 30px;
font-family: Verdana, sans-serif;
font-size:13px;
}
input[type="text"]
{
width: 122px;
height: 30px;
padding-left:7px;
margin: 5px;
}