Выравнивание двух дивов на одной строчке

Altex · June 9, 2008

Скажите пожалуйста, как сделать так, чтобы тектовый инпут был на одной строчке с кнопкой сабмита? Интересует способ без задания ширины дива с кнопкой сабмита, и указания маргина для дива с тектовым инпутом

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
 <div style="border:2px red solid;width:100%;float:none;position:static;">
 <div style="border:2px green solid;float:right;position:static;">
 <input style="" type="submit" value="Search" />
 </div>
 <div style="border:2px blue solid;width:100%;float:none;position:static;">
 <input style="width:100%" type="text" value="Search" />
 </div>
 </div>
</body>
</html>

Нужно, чтобы было на дивах, а выглядело вот так

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
 <table style="width:100%">
 <col width="*" />
 <col width="1" />
 <tr>
 <td>
 <input style="width:100%" type="text" value="Search" />
 </td> 
 <td>
 <input style="" type="submit" value="Search" />
 </td>
 </tr>
 </table>
</body>
</html>

Elendor · June 9, 2008

Ставь у дивов display: table и будет как таблица

http://htmlbook.ru/css/display.html

Altex · June 9, 2008

Спасибо большое, так действительно работает, но только не в IE6 :-( Не подходит вариант. Кстати, если на дивах это просто сложнее и неправильнее идеалогически, то скажите сразу, я тогда на таблицах буду делать, меня это не смущает, если получится проще и правильнее и больше браузеров будут понимать.

Elendor · June 9, 2008

W3C настаивает на дивах, Вы можете делать как Вам легче и удобней. Таблицы распознают все браузеры одинаково, вот только страница не будет показана юзеру пока таблица не загрузится до конца. Так что решайте сами. Хотя погодите, где-то с?дня видел статью о том как сделать. Ага вот: http://xhtml.ru/2005/11/28/css-forms/

Altex · June 9, 2008

К сожалению там ч?тко указана ширина поля ввода. Если прямо там указывать 100%, то строчка разрывается.

Elendor · June 9, 2008

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

Altex · June 9, 2008

Пример - ya.ru

А там на таблицах %(

Elendor · June 9, 2008

Если вам легче таблицами, то делайте таблицами, вам ни кто не запрещает

Altex · June 9, 2008

>> а зачем вам такая длинаая, оставьте стандарт, просто не указывайте, или укажите в пикселах

Почему вы решили, что она "такая длинная"?

У меня есть колонка шириной 230 пикселей, в ней нужно разместить форму быстрого поиска по сайту. В дизайне это выглядит как поле ввода текста и кнопка, расположенные а-ля ya.ru, при этом задумка дизайнера в том, что кнопка не фиксированной ширины какой-то, а в зависимости от размера шрифта пользователя выбирается автоматически браузером (на задана ширина вообще, стандарт), а текстовое поле занимает всю оставшуюся ширину слева от кнопки поиска.

Как бы вы сделали на мо?м месте? Спасибо за ответы, они на самом деле мне помогают. Кстати, а что именно имеется ввиду под словами "W3C настаивает на дивах"?

>> если вам легче на таблицах

Дело в том, что мне не как легче, а как правильнее, я идейный :-) Поэтому и обратился к гурам html-верстки, так как сам я программист..

Вот тут можно увидеть, что я в итоге хочу сверстать (блок с формой поиска справа вверху):

http://axfwiki.vps227.otstrel.ru/index.php....D0.B5.D1.82_v2

Whatsup · June 14, 2008

почему бы не сделать так

//контейнер в котором будет полоска и кнопка

//Полоска

//кнопка

musulman · June 15, 2008

Я обычно пользуюсь таблицами.

Кому как удобнее, но когда форм становиться много соответственно код с таблицами получается не очень скажем так.

Altex · June 15, 2008

Вот мне тоже таблицы не нравятся из-за того, что читать такой код не сильно приятно и понятно.

Я попробывал сделать по вашему примеру, Whatsup, и вот что получилось:

<div style="clear: both;width:100%"> //контейнер в котором будет полоска и кнопка
 <div style="float: left;width:100%"><input type="text" style="width: 100%"/></div>//Полоска
 <div style="float: left;"><input type="submit" /></div>//кнопка
</div>

Тоесть эффекта ноль, как и было, кнопка на другой строчке. Я напомню суть того, что нужно получить в итоге. Визуально должно получиться как тут (контейнер тектового поля занимает 100% от оставшегося места после кнопки):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
 <table style="width:100%">
 <col width="*" />
 <col width="1" />
 <tr>
 <td>
 <input style="width:100%" type="text" value="Search" />
 </td> 
 <td>
 <input style="" type="submit" value="Search" />
 </td>
 </tr>
 </table>
</body>
</html>

Whatsup · June 17, 2008

кто же ставит контейнер в процентном соотношении??Ты мысли глобально что ты делаешь.

Я для тебя специально распишу

<div style="clear: both;width:100%"> //создаешь контейнер,отменяя в нем все обтекания.Длинна его 100 процентов от возможжной длинны.
 <div style="float: left;width:100%"><input type="text" style="width: 100%"/></div>//создаешь под контейнер для формы ввода.Делаешь обтекание справа.задаешь ему 100 процентов длинны от возможной.Доходит ??? Ты задал что он будет занимать столько места сколько есть в первом контейнере div.Как ты хочешь запихнуть туда кнопку ? конечно она прочитает что расстояние занято и даже при обтекании встанет ниже.причем ты задал длину полосы тоже в 100 процентов.Используй точные размеры. 
 <div style="float: left;"><input type="submit" /></div>//кнопка
</div

Altex · June 18, 2008

кто же ставит контейнер в процентном соотношении??Ты мысли глобально что ты делаешь.

Я для тебя специально распишу

<div style="clear: both;width:100%"> //создаешь контейнер,отменяя в нем все обтекания.Длинна его 100 процентов от возможжной длинны.
 <div style="float: left;width:100%"><input type="text" style="width: 100%"/></div>//создаешь под контейнер для формы ввода.Делаешь обтекание справа.задаешь ему 100 процентов длинны от возможной.Доходит ??? Ты задал что он будет занимать столько места сколько есть в первом контейнере div.Как ты хочешь запихнуть туда кнопку ? конечно она прочитает что расстояние занято и даже при обтекании встанет ниже.причем ты задал длину полосы тоже в 100 процентов.Используй точные размеры. 
 <div style="float: left;"><input type="submit" /></div>//кнопка
</div

А ты вопрос мой помнишь? 0_о Я два раза повторил, специально для тебя. Я не знаю точную ширину, ни в пикселях ни в процентах, мне нужно , чтобы ширина рассчитывалась автоматически исходя из размеров второй части, которая тоже рассчитывается автоматически браузером. Если этого сделать нельзя на дивах, то так и скажи. Если этого даже хотеть не нужно, то тоже объясни почему.

Whatsup · June 18, 2008

Ты тугой какой то...ЗАчем тебе ширина нужна ? написал 80 и 20 процентов вот тебе на всю ширину и сделалось в соотношении 80 20.Что за идея такая что бы все высчитывалось браузером ? МОжет он за тебя сверстает все ? Или лучше сайт с нуля по твоим задумкам из головы сделает..Помойму ты бредом занимаешься с таким меню.Ну или объясни зачем тебе это надо.Если не надо то бери линейку и измерь все точно

Altex · June 18, 2008

Ты видимо не в этом измерении находишься.

Я поставил конкретный вопрос, рассказав как мне нужно чтобы было, и конкретно на примере с таблицами показав, как должно выглядеть.

Возможно, что я ошибся с самим вопросом, но ни одного здравого аргумента кроме "может за тебя браузер верстать будет" я не услышал.

Почему мне так надо? Да просто чтобы не тратить время на подсч?т расстояний, если это может сделать и сам браузер (или вс?-таки не может?). Сегодня кнопка с текстом на русском языке "Проголосовать" например, а завтра я сделал на английском "Vote", и вот чтобы не менять нигде и ничего в в?рстке и в стилях, хочется чтобы вс? было автоматически. Более того, я специально прив?л пример как это сделать с помощью таблицы, и в принципе это достаточно просто. И даже более того, когда я пытался сделать с дивами указывая в процентах ширину, то из-за отступов margin/padding вс? съезжало, я просто не мог понять, как это браузер рассчитывает ширину, то учитывая margin/padding, то не учитывая его с другой стороны.

Whatsup · June 20, 2008

Стандартный код должен начинаться с обнуления твоих margin/paddin что бы в разных браузерах все было как должно.Во вторых если хочешь что бы все было ровно то указывай точные значения.Браузеры за тебя считать не будут.У них лишь есть параметры по умолчанию.В твоем случае с помощью css врядли это сделаешь как ты хочешь.Я так и не понял смысла почему нельзя использовать таблицы для которых есть авто определение размеров.Если ты хочешь свободно перемещать твое поиск меню то засунь его в тег ДИв.Для вашей удобности задаете параметр только для текстового ввода и все.Менять больше ничего не надо

Altex · June 20, 2008

>>Стандартный код должен начинаться с обнуления твоих margin/paddin что бы в разных браузерах все было как должно.

Само собой так и есть

>>Во вторых если хочешь что бы все было ровно то указывай точные значения.

Что имелось ввиду? 0_о

>>В твоем случае с помощью css врядли это сделаешь как ты хочешь.

Спасибо, значит буду делать на таблицах. Я как раз и хотел узнать, можно ли сделать на дивах или нет

>>Я так и не понял смысла почему нельзя использовать таблицы для которых есть авто определение размеров.

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

>>Если ты хочешь свободно перемещать твое поиск меню то засунь его в тег ДИв.

Ага, спасибо, возьму на заметку.

>>Для вашей удобности задаете параметр только для текстового ввода и все.Менять больше ничего не надо

Тут тоже слабо понял о чем идет речь.

Когда я делал на дивах, взяв за основу твой пример, я указал в процентах 66% и 34%. Затем я захотел, чтобы внутри большего дива был отступ справа и слева на 8 и 10 пискелей. А у меньшего дива чтобы было по 3 пикселя к примеру тоже слева и справа. Внутри этих блоков я поместил инпуты, задав им 100% ширину. Вс? начало разъезжаться. Вобщем я долго мучался, пытаясь разместить оба инпута в одной строчке, получалось в разных браузерах по-разному, и я в итоге оставил эту затею.

Sign In

Выравнивание двух дивов на одной строчке

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information