Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/429.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/71.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 对齐和_Javascript_Html_Css - Fatal编程技术网

Javascript 对齐和

Javascript 对齐和,javascript,html,css,Javascript,Html,Css,我试图用javascript动态地将selectbox和textbox添加到表单中,但无法使它们正确对齐 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-ser

我试图用javascript动态地将selectbox和textbox添加到表单中,但无法使它们正确对齐

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);
}
我最后得到的是:

非常感谢您的帮助。

尝试添加垂直对齐:顶部;这两个元素都可以使用。

您可以尝试使用此选项

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;
}

你能把你的代码放进去吗?这样我们就可以看一个工作示例了?谢谢。@PressingOnAlways复制粘贴有那么难吗?@Gadgetster不确定这是一个完整的工作示例:没有帮助。谢谢你的回答: