如何让输入内联显示?
问题描述:
我似乎无法弄清楚如何以{display: inline}
格式在下面的代码中显示两个输入,以便它们彼此相邻而不是分开显示。我看了其他帖子,并尝试过jQuery,<style>
标签,.setAttribute
等,以尝试添加此CSS样式。如何让输入内联显示?
我也尝试在CSS中使用必需的display: inline
命令在HTML中创建一个类。我创建了这个功能来打开我的主页上的一个按钮被点击。一切工作正常,我只是想两个输入(文本和按钮)排列在一起。
任何想法我错了?我是一名初学者。
var counter = 1;
var limit = 2;
var newdiv = document.createElement('div');
function addInput(divName){
if (counter == limit) {
(counter);
}
else {
nFilter.className = 'input';
newdiv.setAttribute("style", "display: inline;");
newdiv.innerHTML = "<br><input type='text' placeholder='Postal Code' name='myInputs[]'> " + " <input type='button' value='Lets Go!' onclick='url(file:///C:/Users/Joy/Documents/ZapList/HoldingPage.php)'>";
document.getElementById(divName).appendChild(newdiv).span;
counter++;
}
}
答
输入是inline-block
通过默认的,所以如果有空间它们将显示内联的,如果不是他们将换到下一行。无论是确保包含元素的宽度足以容纳你的输入或尝试:
newdiv.setAttribute("style", "display: inline;white-space:nowrap;");
停止从包装的投入,注意,这种风格应用到div
不的投入,你实际上可能要删除display:inline;
。
答
如果我得到你的权利,那么你要一个按钮被点击时显示两个文本框...
你可以把它非常简单,取文件撰写命令。
例如
<body>
<input type="button" value="Click me" onClick="makeSmth()"></input>
</body>
<script>
function makeSmth() {
document.write("<br><input type='text' id='textBox01'></input>");
}
</script>
答
只是使用style ='float:left;'为每个输入元素
<html>
<head>
<title>this is a test</title>
<meta content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="a"></div>
<script type="text/javascript">
var counter = 1;
var limit = 2;
var newdiv = document.createElement('div');
function addInput(divName){
if (counter != limit) {
newdiv.innerHTML = "<br><input type='text' placeholder='Postal Code' name='myInputs[]' style='float:left;'> " + " <input type='button' style='float:left;' value='Lets Go!' onclick='url(file:///C:/Users/Joy/Documents/ZapList/HoldingPage.php)'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
addInput("a");
</script>
</body>
</html>
谢谢。是的 - 我删除了显示:内联,它工作。这里是我添加了我需要的内容:newdiv.setAttribute(“style”,“width:900px; white-space:nowrap;”); – JEA 2014-10-10 05:57:41