CODEWITHSUNDEEP
htmlcssalignment
Mahesh G
Mahesh G

Reputation: 1276

Align the select and Input and Button HTML elements in one row

Can some one help me lining Select Drop down, Input and Submit button in one row.

I am getting only Input and Button aligned in row but Select is going upside.

I tried below in CSS but didn't work

display : inline;

Can you please help to modify the CSS to align all in one row.

Demo

Upvotes: 1

Views: 3298

Answers (2)

Mahesh G
Mahesh G

Reputation: 1276

I found the solution ,I just need to make

inline-flex =>inline-flex makes the container inline while still retaining the flex layout properties. 

display : inline-flex;

Upvotes: 1

staticCoffee
staticCoffee

Reputation: 127

Your example is a bit everywhere. Also, "selecter" should be spelled "selector", but that is beside the point. Use more <div> elements to wrap around smaller code segments. For example:

    <div>
        <div class="item"><p>Hello</p></div>
        <div class="item"><p>Stack</p></div>
        <div class="item"><p>Overflow!</p></div>
    </div>

Normally, these <div>'s would display underneath one another. However, if we add a styling rule similar to the one you're using, we will get the result of these three elements together on one line. 

.item {
    display: inline-block;
}

Wrap your button elements in a <div> container and style them with the above. Does this answer your question?

Upvotes: 1

Related Questions