1

Тема: Выравнивание элементов формы по центру блока

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

Есть некий макет с адаптивной версткой. Есть <div>, который содержит в себе форму поиска.

Задача - сделать так, чтобы при изменении размера блока, то есть для разных устройств элементы формы inputы выравнивались по центру блока.

Вот код формы. Рисунок для конопки размером 24*24 верстка на purecss

<div class="pure-u-5-24"> <!-- этот блок меняет свои размеры -->

<form class="sisea-search-form" action="http://127.0.0.1" method="get">
<fieldset> 
     <input name="search" id="search" type="text">
    <input name="id" value="13" type="hidden">
      <input id="imgsubmit" type="image" name="picture" src="images/searchbutton.png"/>
   </fieldset>  
</form> 

</div>
Подписи нет

Поделиться

2

Re: Выравнивание элементов формы по центру блока

так они там вроде как 100% ширины, если у вас конкретная ширина, попробуйте сделать форму блоком конкретной ширины и задать ей
margin-left:auto;
margin-right:auto;

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

3 (2014-07-02 15:20:21 отредактировано Аркадий)

Re: Выравнивание элементов формы по центру блока

Сейчас попробую объяснить без рисунка

Все не так просто, meine Herren, по крайней мере, для меня

Я не могу сделать форму конкретной ширины, так как она должна быть разной для разных разрешений экрана.

И форма, и filedset имеют допустим, 100% ширину и заполняют весь родительский блок

а вот инпуты - мы знаем только ширину вот этого
<input id="imgsubmit" type="image" name="picture" src="images/searchbutton.png"/> и она 24px

а вот ширина

<input name="search" id="search" type="text"> не назначена, инпуты не заполняют fieldset на 100%, они выравниваются внутри к левой стороне, поэтому выравнивание form и filedset ничего не дает. При ресайзе экрана размер инпута для текста меняется.

Мне надо каким-то образом сделать так, чтобы fieldset, например, был не 100% своего родителя, а равен ширине двух инпутов. Тогда я получу то, что мне нужно. Но как это сделать - без понятия. Экскременты пока результатов не дали.

Конечно, есть самый простой путь - прописать в лоб размер инпута для текста для основных разрешений экрана и выравнивать себе на здоровье. Но я искал какое-нить более элегантное решение

Подписи нет

Поделиться

4

Re: Выравнивание элементов формы по центру блока

попробуйте так
fieldset {display:inline-bloсk;}

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться