Menu
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++;
}
}
366
asked Sep 15 '25 14:09
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;.
50
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
