бок о бок div с формой, которая не должна ломаться - PullRequest
Новая
       13

бок о бок div с формой, которая не должна ломаться

1 голос
/ 17 февраля 2010

Я хочу иметь несколько элементов div с содержимым рядом, например

D1 D2 D3 D4 D5

D2 содержит форму. Без формы это работает (с помощью display: inline и тому подобное). В результирующем HTML не должно быть разрывов строк, так как это заголовок страницы.

Как мне это сделать?

ОБНОВЛЕНИЕ вот фактический код 

<div id="sep">
  <img alt="separator" src="underline.jpg">
  <div id="block-search-0" class="block block-search">
     <div class="content" style="font-size: 11.52px;">
     <form id="search-block-form" method="post" accept-charset="UTF-8" action="/cms/admin/build/block">
       <div>
        <div class="container-inline">aaa</div>
       </div>
     </form>
    </div>
  </div>
  <div id="lang">
       <ul>
       <li class="fr first active"><a class="language-link active" href="/cms/admin/build/block">Français</a></li>
       <li class="en last active"><a class="language-link active" href="/cms/en/admin/build/block">English</a></li>
       </ul>
  </div>
  <div id="block-text_resize">
    <a id="text_resize_decrease" class="changer" href="javascript:;"><img alt="-" src="aSmall.gif"></a>
    <a id="text_resize_increase" class="changer" href="javascript:;"><img alt="+" src="aBig.gif"></a>
  </div>
  <div class="block-region">bla</div>
</div>

Обратите внимание, что разрывы строк, как показано здесь, могут отличаться от фактических кодов. Некоторые из разрывов здесь были добавлены для ясности.

Ответы [ 3 ]

2 голосов
/ 17 февраля 2010

Я не уверен, что происходит, когда вы помещаете блочный элемент (форму) внутрь встроенного элемента (display: inline).

Вы можете оставить элементы div в качестве блочных элементов и плавать их, например: 

#sep > div {
    float: left;
}

Официально вам бы также пришлось указать ширину плавающих элементов, но я не знаю, действительно ли это необходимо и возможно ли это в вашей ситуации.

0 голосов
/ 17 февраля 2010 
<div id="sep">
<div class="floated_container"></div>
<div class="floated_container">
  <form></form>
</div>
<div class="floated_container"></div>
<div class="floated_container"></div>
</div>

#sep {overflow:hidden;}
.floated_container {float:left;}

Убедитесь, что ваши вложенные контейнеры не превышают общую ширину #sep, иначе плавающие объекты будут переноситься.

0 голосов
/ 17 февраля 2010

Убедитесь, что ширина формы вписывается в элемент div, в который вы ее помещаете? Используйте инспектора пожарных, чтобы проверить это.

...