How can I make inputs display inline?
Question
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, .setAttribute etc. in order to try and add this CSS style.
I've also tried to create a class in the HTML with the requisite display: inline command 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.
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++;
}
}
4 answers
solution1
4 ACCPTED 2014-10-10 00:53:00
Inputs are inline-block by 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:
newdiv.setAttribute("style", "display: inline;white-space:nowrap;");
to stop the inputs from wrapping, note that this style is applied to the div not the inputs, you may actually want to remove display:inline; .
solution2
1 2014-10-09 23:48:01
just using style='float:left;' for each input element
<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>
solution3
0 2014-10-09 21:52:34
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.
eg
<body>
<input type="button" value="Click me" onClick="makeSmth()"></input>
</body>
<script>
function makeSmth() {
document.write("<br><input type='text' id='textBox01'></input>");
}
</script>
solution4
0 2020-12-08 05:34:37
I think this link may be handy
In that case, they resolved from the form tag, and creating a css class:
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.