html - Search input and button not aligning horizontally properly -


While giving a minimum width for a responsive button, I use a form text input and buttons on the same line horizontally Layout trying to align For a reason the minimum width button brings to a new line

 . Search-container {width: 100%; Limit: 1px solid # 000; Display area; }. Search-Text-Container {Width: 90%; display: inline-block; }. Search-Text-Container Input {width: 100%; Height: 30px; }. Order Icon- Container {Width: 10%; display: inline-block; }. round-icon-button {min-width: 30px; Display area; Width: 30px; Height: 30px; Line-height: general; Border: 2px solid # f5f5f5; Limit-Radius: 50%; Color: # f5f5f5; Text-align: center; Text-decoration: none; Background: # 464646; Box-Shadow: 0x3px Gray; font-weight: bold; }. Round-icon-button: hover {background: # 262626; } & Lt; Div class = "search-container" & gt; & Lt; Span class = "search-text-container" & gt; & Lt; Form action = "" & gt; & Lt; Input type = "text" name = "fname" /> & Lt; / Form & gt; & Lt; / Span & gt; & Lt; Span class = "round-icon-container" & gt; & Lt; Button type = "submit" class = "round-icon-button" & gt; & Lt; I class = "fa-search" & gt; & Lt; / I & gt; & Lt; / Button & gt; & Lt; / Span & gt; & Lt; / Div & gt;   

I have a bella here that I am working on any help will be greatly appreciated

You can get it by using CSS like this:

JSFiddle -

  * {Box size: border-box; } @ Media (max-width: 320px) {. Search-Text-Container {Width: 70%! Important; }. Order Icon- Container {Width: 30% Important! }}. Search-container {width: 100%; Limit: 1px solid # 000; Display area; Font-size: 0; / * To remove the space between inline block elements * /}. Search-Container & gt; Duration {font-size: 16px; / * Add font-size for hair-span elements * / vertical-align: center; }    

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -