Можно ли управлять вертикальным пространством, используя только CSS?

-2

У меня есть панель заголовка с логотипом слева и формой поиска. Оба плавают влево. Я пытаюсь контролировать вертикальное расстояние формы поиска с помощью CSS, но я не могу найти хорошее решение, отличное от добавления отступов и/или полей в верхней или нижней части формы поиска, и хотя я могу найти значения, которые работают в одном браузере это не решение, совместимое между браузерами ... Такая же проблема существует, если у меня есть кнопка поиска рядом с полем поиска. Есть ли решение для этого, которое совместимо с несколькими браузерами или мне нужно использовать JavaScript? Есть ли способ сделать что-то подобное?Можно ли управлять вертикальным пространством, используя только CSS?

P.S. Я перезаписываю CSS в своем коде dev.

Вот упрощенная версия моего кода заголовка:

body { 
 
    font-family: Arial, sans-serif; 
 
} 
 

 
header { 
 
    overflow: hidden; 
 
    background-color: black; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
#site-title, #search { 
 
    float: left; 
 
} 
 

 
#site-title { 
 
    margin-right: 50px; 
 
    background-color: green; 
 
    font-size: 28px; 
 
} 
 

 
#search { 
 
    background-color: red; 
 
    margin-top: 5px 
 
}

<body> 
 
    <header> 
 
     <div id="site-title"><a href="#">Site Title</a></div> 
 
     <div id="search"> 
 
      <form> 
 
       <input type="search" placeholder="Search..." /> 
 
      </form> 
 
     </div> 
 
    </header> 
 
</body>

Ссылка на код на JSFiddle: http://jsfiddle.net/mg535m80/2/

Edit: Я нашел решение, это не так кросс- совместимый с браузером, я надеялся, но он работает во всех современных браузерах. Я только добавил display: flex; и align-items: center родителям, и это сработало как шарм. Новый код:

body { 
 
    font-family: Arial, sans-serif; 
 
} 
 

 
header { 
 
    overflow: hidden; 
 
    background-color: black; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
#site-title, #search { 
 
    float: left; 
 
} 
 

 
#site-title { 
 
    margin-right: 50px; 
 
    background-color: green; 
 
    font-size: 28px; 
 
} 
 

 
#search { 
 
    background-color: red; 
 
}

<body> 
 
    <header> 
 
     <div id="site-title"><a href="#">Site Title</a></div> 
 
     <div id="search"> 
 
      <form> 
 
       <input type="search" placeholder="Search..." /> 
 
      </form> 
 
     </div> 
 
    </header> 
 
</body>

Обновлено JSFiddle: http://jsfiddle.net/mg535m80/9/

источник

2015-05-31 user4181107

Вы можете уточнить о различиях вы наблюдаете в разных браузерах? –

@MrLister Например, в Chrome я могу добавить верхний край, допустим, 5px в форму поиска, и он будет выглядеть по центру, а затем в Firefox форма поиска будет выровнена ближе к основанию, чем центр – user4181107

Да, можно указать вертикальные свойства в чистом CSS. Частично вы уже ответили на ваш вопрос (т. Е. padding и margin). Другие свойства включают height, line-height, min-height, max-height и т. Д. Также вы можете использовать position: absolute или fixed и указать top/bottom. Надеюсь, это поможет. С наилучшими пожеланиями,

источник

2015-05-31 20:00:30

Одним из решений может быть установлено height в header:

header { 
    height: 33px; 
}

И затем использовать display: flex для выравнивания окно поиска:

#search { 
    display: flex; 
    align-items: center; 
    height: 100%; 
}

FIDDLE: https://jsfiddle.net/lmgonzalves/mg535m80/3/

источник

2015-05-31 20:02:31 lmgonzalves

Это хорошее решение, но что, если высота заголовка неизвестна? – user4181107

Проблема заключается в стиль input, который отличается от браузеров.

Решение: чтобы входные данные выглядели так, как вы хотите, установите все свои стили явно, а не полагайтесь на значения по умолчанию. Пример:

input { 
    width:10em; height:1.25em; 
    margin:0; border:2px solid #888; padding:0; 
    font:inherit; vertical-align:baseline; 
}

См updated fiddle

источник

2015-05-31 21:01:57

Можно ли управлять вертикальным пространством, используя только CSS?

ответ

Смежные вопросы