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 }
Comments
Post a Comment