Проблемы с полем input

277

11 ноября 2017, 12:12

Всем привет, возникла такая проблема, не понимаю, почему input расположен после текста, а не после логотипа. Вот HTML:

    .inner { 
    	margin-left: auto; 
    	margin-right: auto; 
    	padding-left: 15px; 
    	padding-right: 15px; 
    	width: 1170px; 
    } 
    .header-top { 
    	color: #b1b1b1; 
    	background-color: #252730; 
    	font-size: 11px; 
    	font-family: "Open Sans",sans-serif,Verdana,Arial; 
    	padding-top: 2px; 
    	padding-bottom: 2px; 
    } 
    .header-top-left { 
    	display: inline-block; 
    	margin-left: -40px; 
    } 
    .header-top-left span img{ 
    	padding-right: 10px; 
    } 
    .header-top-right { 
    	display: inline-block; 
    	margin-left: 407px; 
    } 
    .header-top-left li{ 
    	display: inline-block; 
    	border-left: 1px solid #30323b; 
    	padding-left: 15px; 
    	padding-right: 15px; 
    } 
    .header-top-left span { 
    	border-left: 1px solid #30323b; 
    	padding-left: 19px; 
    	padding-right: 19px; 
    } 
    nav { 
    	display: inline-block; 
    } 
    .header-top-right .eye, .health, .stat { 
    	background: url(../images/sprite.png) no-repeat; 
    	display: inline-block; 
    	width: 26px; 
    	height: 17px; 
    } 
    .header-top-right .eye { 
    	background-position: 0 -499px;  
    } 
    .header-top-right .health { 
    	background-position: 3px -465px; 
    } 
    .header-top-right .stat { 
    	background-position: 0 -430px; 
    } 
    .header-top-right .entrance{ 
    	margin-right: 11px; 
    } 
    .logo { 
    	display: inline-block; 
    	width: 300px; 
    } 
    .logo img { 
    	margin-top: 20px; 
    } 
    .logo span { 
    	font-size: 12px; 
    	color: #b1b1b1; 
    } 
    .input { 
    	display: inline-block; 
    } 
    input { 
    	width: 600px; 
    	height: 40px; 
    }

    <!DOCTYPE html> 
        <html> 
            <head> 
                <meta charset="utf-8"> 
                <title>Интернет-магазин Tehnodrom.by. Бытовая техника и электорника в Минске</title> 
        <script 
          src="https://code.jquery.com/jquery-1.12.4.min.js" 
          integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
          crossorigin="anonymous"></script> 
          <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> 
          <script src="js/script.js"></script> 
            </head> 
            <body>  	 
                <header> 
                    <div class="header-top"> 
                        <div class="inner"> 
                        <div class="header-top-left"> 
                            <nav class="menu"> 
                            <ul> 
                                <li>О магазине</li> 
                                <li>Доставка</li> 
                                <li>Оплата</li> 
                                <li>Контакты</li> 
                                <li>Помощь</li> 
                            </ul> 
                            </nav> 
                            <span><img src="images/clock.png">Работаем с 9 до 21</span> 
                        </div> 
                        <div class="header-top-right">             
                            <span class="eye"></span> 
                            <span class="health"></span> 
                            <span class="stat"></span> 
                            <span class="entrance">Вход</span> 
                            <span>Регистрация</span> 
                        </div>           
                        </div> 
                    </div>  
                    <div class="header-middle"> 
                        <div class="inner"> 
                        <div class="logo"> 
                            <img src="images/logo.png">  
                            <span>Интернет-магазин электроники и бытовой техники</span> 
                        </div> 
                        <div class="input"> 
                        <form action="#" method="get" name="input"> 
                            <input type="text" name="search" value="Поиск по каталогу"> 
                        </form> 
                        </div> 
                        </div> 
                    </div> 
                </header> 
            </body>    
        </html>

Answer 1

Потому что у вас так задана верстка. В блоке .logo Находится изображение под ним текст, а уже потом форма с инпутом.