CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
deostroll
deostroll

Reputation: 11975

cannot make html elements appear in one line

I have some text, a dropdown box and a button. I can't get this to appear in one line while using twitter bootstrap 2.3.2

<div class="well">
    <table>
        <tr>
            <td>Select Company</td>
            <td>
                <select class="span3">
                    <option value="0">Compa1</option>
                    <option value="0">Compa1</option>
                </select>
            </td>
            <td>
                <input type="button" class="btn" value="Go" />
            </td>
        </tr>
    </table>
</div>

If you want to know about other variations I've tried out please try the following fiddle:

http://jsfiddle.net/deostroll/9Hg3K/1/

Any ideas to get this in one straight line and make it look aesthetic (more or less)?

Upvotes: 0

Views: 187

Answers (4)

Ranadheer Reddy
Ranadheer Reddy

Reputation: 4324

For the above html , following css is working fine to get them in one straight line

table tr:first-of-type
{
    vertical-align:top;
}

Upvotes: 1

NoLiver92
NoLiver92

Reputation: 892

Look at the extensive documentation for bootstrap: http://getbootstrap.com/2.3.2/base-css.html#forms

just by doing this your form will be in one line:

<form class="form-inline">
<label>Select Company</label>
<select class="span3">
    <option value="0">Compa1</option>
    <option value="0">Compa1</option>
</select>
<input type="button" class="btn" value="Go" />
</form>

this form is displayed all on one line and the form bit will go inside the div/table you want it to.

Looking at the documents it shows you all the possible combinations you can do with bootstrap. This should be the first place to look as it possibly is the best resource as its written by the writers of bootstrap.

Upvotes: 1

Praveen
Praveen

Reputation: 56509

Try adding vertical-align: top;

.sameline {
    display: inline-table;
    vertical-align: top;
}

Check this JSFiddle

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this add margin-bottom:0; in below selector.

DEMO

CSS 

.sameline {
    display:inline-block;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{
    margin-bottom:0;
}

label {
    display:inline-block;
    margin-bottom: 5px;
}

Upvotes: 2

Related Questions