CODEWITHSUNDEEP
jquerycsshtml
user2671513
user2671513

Reputation:

HTML `select` and `input` in one line

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

Upvotes: 4

Views: 11048

Answers (4)

will
will

Reputation: 149

...going back to basics, how about using a simple table?

    <table>
    <tr><td>
          <input type="submit" id="my_input_submit" value="Submit">
    </td><td>
        <select name="my_name">
            <option value="5min">5-Min</option>
            <option value="1hour">Hour</option>
            <option value="1day">Day</option>
        </select>
    </td></tr>
    </table>

Upvotes: 0

Hassan Baig
Hassan Baig

Reputation: 346

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/

Upvotes: 1

Tristan Wood
Tristan Wood

Reputation: 1

Assign the same class to both form elements and give them an inline style

<style>
#my_bar {
width: 100%;
height: 45px;
overflow: hidden;
padding-bottom: 0px;
}
.my_style {
display: inline-block;
}
</style>
<div id="my_bar">
<input type="submit" class="my_style" value="Submit">
<select class="my_style" name="my_name">
<option value="5min">5-Min</option>
<option value="1hour">Hour</option>
<option value="1day">Day</option>
</select>
</div>

Upvotes: 0

Devin
Devin

Reputation: 7720

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

Upvotes: 4

Related Questions