2 div на одной строке с формой между ними

Я пытаюсь заставить один div плавать влево, а один div - вправо, но между ними есть форма, в которой есть 2 элемента выбора (раскрывающиеся списки).

Я могу получить это, поэтому у меня есть:

Div‹------------->Text‹------------->Div

но нет

Div‹------------->Форма‹------------->Div

Если у меня просто есть пустой элемент формы, он работает как текст, но как только я помещаю 2 выбора, правый div падает вниз по строке, то же самое происходит, если я помещаю текстовое поле (ввод, тип текста) на место из 2 выбирает.

Это код, который у меня есть до сих пор (обратите внимание, что на данный момент я не использую таблицу стилей, но в конечном итоге я это сделаю)

<div class="nav" style="text-align:center;">

<div class="prev" style="float:left;"><a href="/index.php?m=7" rel="nofollow">« July</a></div>

<form method="get" action="" id="form1">

<select id="months" name="month" onchange="javascript:document.getElementById('form1').submit();">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8" selected="selected">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select id="year" name="yr" onchange="javascript:document.getElementById('form1').submit();">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010" selected="selected">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>

</form>

<div style="float:right;" class="next"><a href="/index.php?m=9" rel="nofollow">September »</a></div>

</div>

html css css-float
person Jonathan.    schedule 21.08.2010    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Элемент HTML <form> по умолчанию является элементом block, например как <div>. Он всегда будет идти в своей собственной новой строке. Вам нужно либо display это inline, либо float это и left. Поскольку два других div уже плавают, проще всего просто плавать и форму. Например.

<form style="float: left;">

Тем не менее, рассмотрите возможность размещения стиля CSS в собственном файле CSS и ссылки на идентификаторы и классы.

person BalusC    schedule 21.08.2010
comment
плавание — это здорово, но им часто злоупотребляют. Это хорошее время, чтобы использовать его, но есть лучшие решения (встроенный блок) - person jdc0589; 22.08.2010
comment
Да, я помещу стиль CSS в его собственный файл CSS, просто поместив его в файл HTML, пока я не отсортирую его. Неужели плавающая форма слева сделает ее не по центру? - person Jonathan.; 22.08.2010

arrow_upward
1
arrow_downward

Есть гораздо более простой способ сделать это. Css "display: inline-block" проще всего использовать. Вопреки распространенному мнению, у него ДЕЙСТВИТЕЛЬНО идеальная кроссбраузерная поддержка, если используются правильные приемы. Вот пример: (зум и *display нужны для того, чтобы IE работал хорошо)

<html>
  <head>
        <style type="text/css">
            .element
            {
                 display:inline-block;
                 zoom:1;
                *display:inline;
            }
        </style>
  </head>

    <body>
        <div class="element">
            Stuff in here....
        </div>
        <form class="element">
                <input type="text" name="testInput" />
        </form>
        <div class="element">
                More stuff
        </div>
    </body>
</html>
person jdc0589    schedule 21.08.2010
comment
Я попробовал, и он отлично работал в Firefox и Chrome (как обычно), даже когда я добавил float:right в div, который говорит больше. Но в опере это работает хорошо, пока я не добавлю float:right к большему div, а затем div прыгает вниз по строке? - person Jonathan.; 22.08.2010
comment
Вам вообще не нужно использовать float с этим методом. Если вам нужен другой элемент, отображаемый таким же образом, просто добавьте к нему класс элемента. Если он все еще прыгает вниз по строке, это просто потому, что не хватило места для его размещения на предыдущей строке (элемент был шире, чем было доступно) - person jdc0589; 23.08.2010
comment
Но то, что вы дали, было: <----->DivFormDiv<-----> тогда как я хотел Div<----->Form<----->Div - person Jonathan.; 23.08.2010
comment
Не следует вашим обозначениям, но вы можете иметь встроенные блочные элементы внутри обертки div, если это то, что вам нужно. - person jdc0589; 24.08.2010

arrow_upward
0
arrow_downward

Причина в том, что вы не присвоили свойство ширины элементам div и формам. Если вы разместили 2 элемента div, форма также должна быть плавающей.

<div class="nav" style="text-align:center;">
<div class="prev" style="float:left;width:200px; background-color:#454545"><a href="/index.php?m=7" rel="nofollow">« July</a></div>

<form method="get" action="" id="form1" style="width:200px; background-color:#454545; float:left">

</form>

<div style="float:right;width:200px; background-color:#454545" class="next"><a href="/index.php?m=9" rel="nofollow">September »</a></div>

</div>

Ширина задается случайным образом. Используйте этот инструмент, чтобы определить значение ширины

person unigg    schedule 21.08.2010
comment
Но текст в якорях в div является динамическим, и я не понимаю, почему я должен указывать ширину, это делает его менее гибким. - person Jonathan.; 22.08.2010

arrow_upward
0
arrow_downward

Мне пришлось отказаться от плавания, так как ни один из ответов на самом деле не работал (не хочу устанавливать ширину, ответы jdc0589 не плавали div влево и вправо, и когда я это сделал, это сломалось, и плавание формы слева, очевидно, сделало это не в центре), поэтому мне пришлось использовать абсолютное позиционирование:

<div class="nav" style="text-align:center;  position:relative;">

<div style="display:inline; position:absolute; top:0px; left:0px; min-width:105px;" class="prev"><a href="/index.php?m=7" rel="nofollow">« July</a></div>

<form method="get" action=""  id="form1">

<select style="" id="months" name="month" onchange="javascript:document.getElementById('form1').submit();">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8" selected="selected">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select style="" id="year" name="yr" onchange="javascript:document.getElementById('form1').submit();">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010" selected="selected">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>

</form>

<div style="display:inline; position:absolute; top:0px; right:0px;  min-width:105px;" class="next"><a href="/index.php?m=9" rel="nofollow">July »</a></div>

</div>
person Jonathan.    schedule 22.08.2010