javascript 如何使输入显示内联？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26288241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make inputs display inline?
提问by JEA
I can't seem to figure out how to display the two inputs in the following code as {display: inline}format so that they appear next to each other rather than on separate lines. I've looked at other posts and have tried jQuery, <style>tags, .setAttributeetc. in order to try and add this CSS style.
我似乎无法弄清楚如何将以下代码中的两个输入显示为{display: inline}格式，以便它们彼此相邻而不是在单独的行上显示。我查看了其他帖子并尝试了 jQuery、<style>标签.setAttribute等，以尝试添加此 CSS 样式。
I've also tried to create a class in the HTML with the requisite display: inlinecommand in the CSS. I created this function to open up once a button on my homepage is clicked. Everything works fine, I just want the two inputs (text and button) to line up next to each other.
我还尝试display: inline使用 CSS 中的必要命令在HTML 中创建一个类。我创建了这个功能，一旦点击我主页上的按钮就会打开。一切正常，我只希望两个输入（文本和按钮）并排排列。
Any idea of where I am going wrong? I am a beginner.
知道我哪里出错了吗？我是初学者。
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++;
}
}
回答by Jon P
Inputs are inline-blockby default, so if there is space they will display inline, if not they will wrap to the next line. Either make sure the containing elements are wide enough to accommodate your inputs or try:
输入是inline-block默认的，所以如果有空间，它们将内联显示，如果没有，它们将换行到下一行。确保包含的元素足够宽以容纳您的输入或尝试：
newdiv.setAttribute("style", "display: inline;white-space:nowrap;");
to stop the inputs from wrapping, note that this style is applied to the divnotthe inputs, you may actually want to remove display:inline;.
要停止包装输入，请注意，此样式应用于而div不是输入，您可能实际上想要删除display:inline;.
回答by Saeid
just using style='float:left;'for each input element
只需使用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>
回答by herzDev
If I get you right, then you want to display two textBoxes when a button is clicked...
如果我说得对，那么您想在单击按钮时显示两个文本框...
You can make it pretty simple and take the document.write command.
你可以让它变得非常简单并使用 document.write 命令。
e.g.
例如
<body>
<input type="button" value="Click me" onClick="makeSmth()"></input>
</body>
<script>
function makeSmth() {
document.write("<br><input type='text' id='textBox01'></input>");
}
</script>
