How to display inline input in li?


Tags: html,css

Problem :

HTML:

<div id="options">
    <ul>
        <li>
            <label for="input_color">Input Color</label>
            <input type="text" id="input_color">
        </li>
        <li>
            <label for="output_color">Output Color</label>
            <input type="text" id="output_color">
        </li>
        <li>
            <label for="pixels">Pixels to the left</label>
            <input type="text" id="pixels">
        </li>
        <li>
            <label for="pixels">Speed (in second)</label>
            <input type="text" value="0.02" id="speed">
        </li>
        <li>
            <input type="submit" value="Reset" class="submit">
        </li>
    </ul>
</div>

CSS:

div#options ul, div#options li{
    margin:0; 
    padding:0; 
    list-style:none;
}
div#options li{
    clear: both;
    list-style:none;
    padding-bottom:30px;
    white-space: nowrap;
}

div#options input{
    float:left;
    width: 50%;
}
div#options label{
    float:left;
    width: 50%;
}

image

I need to display input next to the label, but it always appears under it - how to fix it?



Solution :

Remove the padding and margin and borders from your inputs and labels, or make them both less than 50% wide.

They can't both fit side-by-side, the box model will make (at least the <input>) wider than 50%: The space it occupies will be 50% the width of its container, plus its padding, plus its border.


    CSS Howto..

    css/html, how to scale and center a logo image

    How to add an image to an anchor tag using CSS?

    how to remove a CSS property using jquery

    How do I add the date a blog post was created in place of a bullet point under list-style-type?

    How to place circle and text in one line?

    how to show css text in html div

    How to highlight a whole cell when hovering over link

    How to make bootstrap css input add-on button and error span look good

    When a CSS selector matches N elements, how to get only the one at a certain index?

    How do I center my responsive form and align it evenly with everything else?

    How to mix 100% height with a minimum height

    How to position child div to the center of every parents div using position absolute in css [duplicate]

    How to align a div to lower left corner in css

    How to make search bar responsive using CSS

    Border positioning: how to?

    How can I tell a scrollbar to always start at the bottom with CSS?

    How do I keep an element from pushing another element in CSS?

    How do I remove a hover effect if the Element has focus?

    Change how CSS border edges meet? [duplicate]

    How to add a Delay on Bootstrap Dropdown Hover

    How to animate X number of divs using CSS and javascript?

    How can I force IE to keep some margin at left in it's browser window?

    How to develop Desktop Apps using HTML/CSS/JavaScript? [closed]

    Building a DOS-feel script. How to make the command line?

    How can I select this element?

    How can I make my web application look correct in IE 8 and 9? [closed]

    how can I create overlay div to fit the rest of the screen

    CSS flex, how to display one item on first line and two on the next line

    How to keep a sticky menu contained inside a floating sidebar?

    How to fix an overlapping image in CSS?