2 деления на одной строке с формой между - PullRequest
Новая
       3

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

0 голосов
/ 22 августа 2010

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

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

Div <-------------> Текст <-------------> 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>

Ответы [ 4 ]

3 голосов
/ 22 августа 2010

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

<form style="float: left;">

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

1 голос
/ 22 августа 2010

Существует гораздо более простой способ сделать это. Css "display: inline-block" - самая простая вещь для использования. Вопреки распространенному мнению, он имеет идеальную поддержку кроссбраузера, если используются правильные приемы. Вот пример: (зум и * дисплей должны заставить 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>
0 голосов
/ 22 августа 2010

Мне пришлось отказаться от плавающего, поскольку ни один из ответов не сработал (не хочу устанавливать ширину, ответы 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>
0 голосов
/ 22 августа 2010

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

<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>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...