How can I make inputs display inline?


Tags: javascript,jquery,html,css,innerhtml

Problem :

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


Solution :

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 accomodate you inputs or try:

newdiv.setAttribute("style", "display: inline;white-space:nowrap;");

to stop the inputs from wrapping, note that this style is applies to the div not the inputs, you may actulally want to remove display:inline;.


    CSS Howto..

    jQuery & CSS - How to stop a relative element from floating left and right (when you're scrolling)?

    How to resize div size proportional with browser size?

    how to make button with image responsive

    How do I specify IE 11 specific css file?

    How do I change phpmyadmin font size for sql query box?

    SCSS has the color in rgba() format, but the color is in hex format. How to keep the color in RGBA() format in the genrated css?

    CSS - how to set some divs inline

    How to apply alternate background color for each column in CSS columns

    How to fix the my Anchor link issue [duplicate]

    How to create a row of three expandable/collapsible divs which react on hover?

    css How can I make the page body stay the same size even if I add element to it?

    How to hide text present inside search box?

    CSS selector for showing descendants doesn't work properly

    how to give two different states in css?

    Using CSS approach how to set an image to fill a path in SVG?

    Contact page Design how to add Bootstrap

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    CSS: How to get position and size relative to screen width?

    How to prevent cursor from getting stuck in css transform:rotate in firefox?

    How to get the last Element of CSS?

    how to modify height of a div when hover it and with transition (priority of CSS without Javascript)

    CSS - HTML - How to align images properly across the page

    How can I have two divs inside a container such that when resizing one the other automatically resizes to fill the container?

    How do I stop a CSS layout from distorting when zooming in/out?

    How to abruptly stop a linear animated jQueryUI slider handle (crossbrowser)

    How do I make a horizontal list of inline elements stack vertically when the div container is resized?

    How to set 0% css of keyframes as current css value for the element?

    How to create a drop down menu like the one in this picture

    How to load dynamic CSS files based on condition

    Preload all CSS images while showing a preloader