Выравнивание блока и input

apv1989 · June 16, 2011

<!DOCTYPE html>
<html>
<head>
  <title>Добавление адресата</title>
  <style type="text/css">
body { font-family: "arial", sans-serif;
font-size: 12px;
font-size-adjust: none;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 110%;
color: #333333;
}
.side1 {
margin: 0pt 2% 0pt 0pt;
padding: 0px 0pt 0pt;
width: 65%;
overflow: hidden;
min-width: 550px;
}
.big_input {
width: 99%;
}
select.big_select {
width: 85%; /*min-width: 350px;*/
max-width: 715px;
}
.dark_grey {
margin: 0pt;
padding: 1pt 15px 7px;
background: rgb(228, 228, 228) none repeat scroll 0% 50%;
}
.big_textare {
margin: 0;
display: block;
width: 99%;
clip: rect(5px, 40px, 45px, 5px);
height: 260px;
}
.s_label {
margin-top: 13px;
margin-bottom: 3px;
color: rgb(142, 142, 142);
}
.dg {
padding: 11px;
background: rgb(245, 245, 245) none repeat scroll 0% 50%;
}
.db {
display: block;
}
  </style>
</head>
<body>
<div class="fl side1">
<div class="dg white_box">
<h2>Заголовок</h2>
</div>
<label class="db s_label">Название организации: </label>
<div class="box"><input class="big_input"
 type="text"></div>
<br>
<br>
<br>
<div class="box">
<div class="dark_grey"><strong><label
 class="db s_label">Обязанности:</label></strong></div>
<textarea class="big_textare"> </textarea> </div>
</div>
</body>
</html>

Здравствуйте.

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

Старший программист мне говорит, что без JS не сделать. Но может есть более изящное решение на CSS?

В аттаче картинка, где показано, что я хочу.

Great Rash · June 16, 2011

Картинки нет. Чего хочется непонятно пока, но чую, что старший программист ошибается

apv1989 · June 16, 2011

Картинки нет. Чего хочется непонятно пока, но чую, что старший программист ошибается

Терь есть)

amelice · June 16, 2011

Я посмотрела твой код, сама новичок в верстке:

Вот эти моменты правильные?


1).side1 {
margin: 0pt 2% 0pt 0pt;
padding: 0px 0pt 0pt;
}

2).big_input {
width: 99%;
}

3)background: rgb(228, 228, 228) none repeat scroll 0% 50%;
4).big_textare {
width: 99%;
}

1) можно ли мешать разные единицы размерности?

2,4) ты же ведь хочешь, чтоб элементы формы и элементы блоков были выровнены по правому краю, то зачем ограничивать таким образом ширину формы, если не известно к чему ведет 99%?

3) если не используешь рисунок для бекграунда, то зачем эти свойства после значения color?

думаю, выровнять правые края можно, если использовать вместо бордера, outline. Т.к. последний элемент не участвует в расчете ширины элементов.

Ниже привела пример. В ФФ работает, а вот в IE не до конца...

Пока не могу найти ответа.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Добавление адресата</title>
  <style type="text/css">
body{
		width: 65%;
		font:12px arial,sans-serif;
		}
.container{
		overflow: hidden;
		min-width: 550px;
		}
input,textarea{
		width:100%;
		border:0;
		outline:2px inset #aaa;
		}
h2{
		background:#ddd;
		padding:15px;
		}
label[for="org"]{
		display:block;
		color:#888;
		padding:0 0 0 2px;
		}

label[for="res"]{	
		display:block;
		color:#888;
		margin:40px 0 0;
		padding:10px 0 10px 2px;
		background:#ddd;
		}
div div{ 
		padding:0 2px;}
  </style>
</head>
<body>
     <div class="container">
		<h2>Заголовок</h2>
		<label for="org">Название организации:</label>
		<div>
		   <input type="text" name="text" id="org">
		</div>
		<label for="res">Обязанности:</label>
		<div>
		   <textarea id="res"></textarea>
		</div> 
		</div>
     </div>
</body>
</html>

Edited June 16, 2011 by cheburek

Great Rash · June 17, 2011

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


.input {padding: 1px 3px; border: #69c 1px solid; background: white;}
.input input {width: 100%; padding: 0; border: 0; background: none;}


<div class="input">
  <input type="text" name="test" id="test" value="я правильный резиновый инпут" />
</div>

amelice · June 17, 2011

Гритраш, спасибо. Мне тоже было интересно, как это сделать. Работает.

apv1989 · June 18, 2011

Да, спасибо болшое. Решение прямо то, что мне нужно!!

cheburek, я, наверно, не смогу ответить на твои вопросы, я - java-программист и с CSS единственный раз столкнулся

Sign In

Выравнивание блока и input

Question

apv1989

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

apv1989

Link to comment

Share on other sites

amelice

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

amelice

Link to comment

Share on other sites

apv1989

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information