css - HTML: adding <form> tags to in input textbox puts textbox under website logo -


i making social network , having troubles navbar , search box. have simple code textbox

<div style="float:left">     <a href="index.php"><div class="website_icon"></div></a>     <input type="text" name="q" class="search" placeholder="search..." /> </div>< 

when have code this, looks http://prntscr.com/39v9g0

now

<div style="float:left">     <a href="index.php"><div class="website_icon"></div></a>     <form action="" method="get">       <input type="text" name="q" class="search" placeholder="search..." />     </form> </div> 

when add <form></form> tags textbox, looks http://prntscr.com/39v9kl

here css textbox, , website_icon

/*search box*/ .search {     height: 30px;     width: 250px;     margin-top: 10px;     border-radius: 3px;     -webkit-transition: 0.3s ease-out;     -moz-transition: 0.3s ease-out;     -o-transition: 0.3s ease-out;     transition: 0.3s ease-out;     padding-left: 6px;     padding-right: 6px;     border: 0px; } /*search box hover*/ .search:hover {     outline: none;     padding-left: 6px;     padding-right: 6px; } /*search box focus*/ .search:focus {     outline: none;     padding-left: 6px;     padding-right: 6px;     -webkit-transition: 0.3s ease-out;     -moz-transition: 0.3s ease-out;     -o-transition: 0.3s ease-out;     transition: 0.3s ease-out;     width: 300px; } /*website icon*/ .website_icon {     width: 30px;     height: 30px;     background: url('../img/desktop-icon.png');     display: inline-block;     margin-top: 10px;     margin-right: 7px;     float: left; } 

does know why textbox goes under logo when adding form tags? in advance!

form block element, reason starts new line.

make display:inline-block

form{   display:inline-block } 

demo


Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -