How to line these up horizontally?

HTML & CSS
1

These images are in a Form, and the second and third image are next to each other horizontally, but I’d like the first one on that same line, but it is on the line above them.
How can I line up all three of these horizontally?

<input type="image" src="/images/Credits.png" name="purchase" value="Credits">
<a href="../credits.php"><img src="../images/Purchase.png" alt="Purchase"></a>
<a href="../page.php?page=1"><img src="../images/Search.png" alt="Search"></a>
3

see fiddle:http://jsfiddle.net/cmyohk7x/

I stick them all in <ul><li></li></ul> and display:inline-block, and vertical-align:top;

4

What CSS do you have applied to that inputs? You can easily just set them to display:inline-block (no need to add the HTML that @lauren_olsen17 has given in her above post. That’s just extra unnecessary code).

It should all be on the same line though to begin with. I’m guessing you set the input to display:block; or something.

5

This is the only styling I had originally:

<input type="image" src="/images/Credits.png" name="purchase" value="Credits" style="margin:7px 0" style="padding:1px 2px 1px 2px">
<a href="../credits.php"><img src="../images/Purchase.png" alt="Purchase" style="margin:7px 0;padding:1px 2px 1px 2px"></a>
<a href="../page.php?page=1"><img src="../images/Search.png" alt="Search" style="margin:7px 0;padding:1px 2px 1px 2px"></a>

How/where can I add "display: inline block?
Any additional help will be appreciated.

6

Well that obviously can’t be the case because look at this: http://jsfiddle.net/my6o4gwk/1/

Those 3 are all on the same line. So there is obviously other code you are not showing us. Please give us a live link.

7

Thanks for all of your replies.
I’ve determined that when I remove this from my CSS:

form select, form input
{
display:table-cell;
vertical-align:middle;
}

I get what I’m after: ‘having the buttons all line up horizontally’, but that css code is being used for something else, so I don’t want to remove it. What’s your suggestion?

8

That code you just posted is VERY ambiguous and will be applied to all elements.

I’d rework that code. On the elements that you need it (for whatever reason), just add a class to the select / inputs and them update your CSS accordingly. If your contact form needs that, then do something like this

form#contact select, form#contact input{} etc. Make it specific to the form / individual elements.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.