Search code examples
phpcsstextboxalignment

Insert textbox inline


I'm trying to put a text box (which works as a search bar) in the same line as six other links (three of them are small square images). It's 850px long.

[This is the page I'm talking about] -- After the three links and social media buttons.

Unfortunately, when I put the textbox, it moves to the next line. Here is my code:

<form name="search" method="get" action="search.php">
<input type="text" name="find" id="find" />
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

Ideally, I would like to have it aligned to the right but I can't even get it on the line. I have tried aligning it with <span> but it stays on the left anyway.


Solution

  • The <form> element is a block element (it doesn't go in line with the rest of your links).

    You have to put the links inside that <form> element, along with the inputs. Actually, just move the whole thing into the form. It should be ok. Here is how it should look:

    <form name="search" method="get" action="search.php">
        <p class="navitop">
            <a href="contact.php">Contact Us</a> | 
            <a href="localsites.php">Local News Sites</a> | 
            <a href="newsletter.php">Newsletter</a> 
            <a href="https://www.facebook.com/JansAviation"><img src="img/facebook-button.png" width="13" height="13"  alt="Facebook" /></a> 
            <a href="https://twitter.com/JansAviation"><img src="img/twitter-button.png" width="13" height="13" alt="Twitter"/></a> 
            <a href="https://plus.google.com/113060095863975848987"><img src="img/googleplus-button.png" width="13" height="13" alt="Google+" /></a> 
    
         <input type="text" name="find" id="find" value="" />
         <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
         </p>
    </form>