HTML `select` and `input` in one line

Question

HTML select and input in one line

I want to have select options and input submit buttons in the same line. The following works for two input tags but it's not working for input and select. Please help me align these two tags in one line.

Here's my HTML:

<form method="POST">
    <div id="my_bar">
        <span>
        <input type="submit" id="my_input_submit" value="Submit">
        </span>
        <div id="my_input">
            <select name="my_name">
                <option value="5min">5-Min</option>
                <option value="1hour">Hour</option>
                <option value="1day">Day</option>
            </select>
        </div>
    </div>
</form>

And here's my CSS

#my_bar {
    width: 100%;
    height: 45px;
    overflow: hidden;
    padding-bottom: 0px;
}

#my_bar span {
    height: 100%;
    display: block;
    overflow: hidden;
    padding-left: 0px
}

#my_input {
    height: 100%;
    width: 100%;
    text-align: center;
}

#my_input_submit {
    height: 100%;
    float: right;
}

Answer 1

Try this HTML

<form method="POST">
    <div id="my_bar">
        <input type="submit" id="my_input_submit" value="Submit" />
        <select name="my_name">
            <option value="5min">5-Min</option>
            <option value="1hour">Hour</option>
            <option value="1day">Day</option>
        </select>
    </div>
</form>

and this CSS:

    #my_bar {
    width: 100%;
    height: 45px;
    display:block;
    padding-bottom: 0px;
}
#my_input {
    height: 100%;
    width: 100%;
    text-align: center;
}
#my_input_submit {
    height: 100%;
}
input, select {
    display:inline-block;
    vertical-align:middle;
}

Basically, you're over complicating things and adding divs and IDs everywhere. Just cleaning it makes a giant difference, now you may need some styling, maybe make that humongous button smaller, or make the select bigger

Answer 2

Update you css as follows:

 #my_bar {
    width: 100%;
    height: 45px;
    overflow: hidden;
    padding-bottom: 0px;
}

#my_bar span {
    height: 100%;
    display: inline;
    overflow: hidden;
    padding-left: 0px
}

#my_input {
    height: 100%;
    width: 100%;
    text-align: center;
display: inline;    
}

#my_input_submit {
    height: 100%;
}

Here is the working sample:

http://jsfiddle.net/z5gt4tLe/

But if you want place submit button after the select then you can see:

http://jsfiddle.net/z5gt4tLe/1/