ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Почему инпут и кнопка не встают в одну строку ровно?
11 сообщений из 11, страница 1 из 1
Почему инпут и кнопка не встают в одну строку ровно?
    #38271596
MIchPl
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MIchPl
Гость
есть кнопка и есть инпут для поиска. Вроде скинул всё на ноль и паддинг и маржин, но почему-то создаётся с отступами не понятными.
css
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
#search input
{
	width: 186px;
	height: 25px;
	background: url(../img/search.png) no-repeat;
	border: none;
	text-indent: 30px;
	padding: 0;
}

#search button
{
	width: 60px;
	height: 25px;
	background: url(../img/search_button.png) no-repeat;
	border: none;
	padding: 0;
}

#search
{
	height: 25px;
	width: 250px;
}



HTML
Код: html
1.
2.
3.
4.
<div id="search">
	<input type="text" value="" />
	<button></button>					
</div>



Может лыжи не едут, а может я не правильный подскажите плз
вот скрин
...
Рейтинг: 0 / 0
24.05.2013, 11:38
| Ответить | Цитировать | Написать  
Почему инпут и кнопка не встают в одну строку ровно?
    #38271623
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
MIchPl, в каком браузере?
...
Рейтинг: 0 / 0
24.05.2013, 11:49
| Ответить | Цитировать | Написать  
Почему инпут и кнопка не встают в одну строку ровно?
    #38271634
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Пример кастрирован.

У меня нет ваших и бекграундов, а кнопка на следующую строку переносится. Если задать бордеры и расширить див, то все ровно.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE html>

<html>
<head>
    <style> 
#search input
{
	width: 186px;
	height: 25px;
	background: url(../img/search.png) no-repeat;
	border: solid 1px black;
	text-indent: 30px;
	padding: 0;
}

#search button
{
	width: 60px;
	height: 25px;
	background: url(../img/search_button.png) no-repeat;
	border: solid 1px black;
	padding: 0;
}

#search
{
	height: 25px;
	width: 350px;
}
    </style>
</head>
<body>
    <div id="search">
	<input type="text" value="" />
	<button>search</button>					
</div>
</body>
</html>
...
Рейтинг: 0 / 0
24.05.2013, 11:52
| Ответить | Цитировать | Написать  
Почему инпут и кнопка не встают в одну строку ровно?
    #38271670
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Antonariy, если у инпута убрать рамку, то кнопка не переносится. По крайней мере в Chrome.
...
Рейтинг: 0 / 0
24.05.2013, 12:03
| Ответить | Цитировать | Написать  
Почему инпут и кнопка не встают в одну строку ровно?
    #38271982
MIchPl
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MIchPl
Гость
skyANA,

Прошу прощения забыл написать браузеры.
все одинаково.
Переносить-то переносит, но вот почему-то сдвигает либо кнопку, либо инпут вниз (в хроме кнопка сдвигается вниз).
файлик ресет вроде все настройки браузера сбрасывает.

Не могу понять почему они не хотят вставать на одной линии. Высота у них одинаковая, не понятно, что за отступы
...
Рейтинг: 0 / 0
24.05.2013, 13:21
| Ответить | Цитировать | Написать  
Почему инпут и кнопка не встают в одну строку ровно?
    #38271988
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Код страницы полностью приведте
...
Рейтинг: 0 / 0
24.05.2013, 13:24
| Ответить | Цитировать | Написать  
Почему инпут и кнопка не встают в одну строку ровно?
    #38272003
MIchPl
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MIchPl
Гость
Antonariy,
HTML
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
		<a name="Наверх"></a>
		<div class="body">
			<div class="mid_container">
				<div class="header">
					<div id="logo">
					</div>
					<div class="header_col">
						<div id="region">
							<select size="1">
								<option disabled="disabled" selected="selected">Регион</option>
								<option>Новосибирск</option>
							</select>
						</div>
						<div id="logo_text">
							Интернет-магазин спортивной одежды и аксессуаров
						</div>
					</div>
					<div class="header_col">
						<div id="search">
							<input type="text" value="" /><button></button>
						</div>
						<div id="header_phone">
							
						</div>
					</div>
					<div class="header_col">
						<div id="priv_offic">
							Войти | Регистрация | Помощь
						</div>
						<div id="cart">
							<p>Корзина</p>
							<span>5 товаров | 1270 р.</span>
						</div>
					</div>
				</div>
				<div class="top_menu">
					<ul>
						<li><a href="#" style="background: url(../img/menu_img/accessories.png) no-repeat ;"></a></li>
						<li><a href="#" style="background: url(../img/menu_img/media.png) no-repeat ;"></a></li>
						<li><a href="#" style="background: url(../img/menu_img/shoes.png) no-repeat ;"></a></li>
						<li><a href="#" style="background: url(../img/menu_img/wear.png) no-repeat ;"></a></li>
						<li><a href="#" style="background: url(../img/menu_img/food.png) no-repeat ;"></a></li>
						<li><a href="#" style="background: url(../img/menu_img/rhinestones.png) no-repeat ;"></a></li>
						<li><a href="#" style="background: url(../img/menu_img/fabric.png) no-repeat ;"></a></li>
					</ul>
				</div>
				<div class="slider">
					<img src="#"></img>
					<img src="#" id="selected"></img>
					<img src="#"></img>
					<img src="#"></img>
					<img src="#"></img>
				</div>
				<div class="sub_menu">
					<div id="sub_menu_type">
						<div>Виды спорта</div>
						<div>Бренды</div>
					</div>
					<ul id="sub_menu_items">
						<li><a href="#" id="left_arrow">&larr;</a></li>
						<li><a href="#">Спортивные бальные танцы</a></li>
						<li><a href="#">Сноуборд</a></li>
						<li><a href="#">Футбол</a></li>
						<li><a href="#">Баскетбол</a></li>
						<li><a href="#">Бодибилдинг</a></li>
						<li><a href="#">Лёгкая атлетика</a></li>
						<li><a href="#" id="right_arrow">&rarr;</a></li>
					</ul>
				</div>
				<div class="recommends">
				
				</div>
				<div class="sales">
					<div id="sale">Распродажа</div>
					<div id="product_ofthe_day"></div>
					<div id="novelty">Новинки</div>
				</div>
				<div class="news_list">
					<div id="news_item">
						<p>27 апреля</p>
						<a href="#">Акция "Дисконтная карта в подарок" действует две недели</a>
					</div>
					<div id="news_item">
						<p>27 апреля</p>
						<a href="#">Акция "Дисконтная карта в подарок" действует две недели</a>
					</div>
					<div id="news_item">
						<p>27 апреля</p>
						<a href="#">Акция "Дисконтная карта в подарок" действует две недели</a>
					</div>
				</div>
				<div class="footer">
					<div class="bottom_meny">
					</div>
					<div id="social">
					</div>
					<div id="footer_meny">
					</div>
					<div id="ref"></div>
					<div>
						
					</div>
				</div>
			</div>
		</div>


	</body>
</html>
...
Рейтинг: 0 / 0
24.05.2013, 13:28
| Ответить | Цитировать | Написать  
Почему инпут и кнопка не встают в одну строку ровно?
    #38272009
MIchPl
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MIchPl
Гость
Antonariy,
css
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
@import 'reset.css';
@import 'text_style.css';

body
{
	background-color: #f0e8e8;
}

.mid_container
{
	width: 1024px;
	background-color: #fff;
	margin: 0 auto;
}

.header
{
	height: 182px;
	width: 100%;
	background: url(../img/header_bg.png) repeat-x;
}

#logo
{
	width:153px;
	height:99px;
	background: url(../img/logo.png) repeat-x;
	float: left;
}

.header_col
{
	width: 260px;
	float: left;
}

#search input
{
	width: 186px;
	height: 25px;
	background: url(../img/search.png) no-repeat;
	/*border: none;*/
	text-indent: 30px;
	padding: 0;
}

#search button
{
	width: 60px;
	height: 25px;
	background: url(../img/search_button.png) no-repeat;
	/*border: none;*/
	padding: 0;
}

#search
{
	height: 25px;
	width: 250px;
}

/********************************/
/*корзина, вход*/
/********************************/

.top_menu
{
	height: 144px;
	width: 100%;
	background: url(../img/top_menu_bg.png) repeat-x;
}

.top_menu ul
{
	padding: 15px 40px;
}

.top_menu ul li
{
	float: left;
	margin: 0 auto;
	width: 110px;
	height: 113px;
	display: inline-block;
}

.top_menu ul li a
{
	width: 110px;
	height: 113px;
	vertical-align: bottom;
	display: inline-block;
}
...
Рейтинг: 0 / 0
24.05.2013, 13:28
| Ответить | Цитировать | Написать  
Почему инпут и кнопка не встают в одну строку ровно?
    #38272049
MIchPl
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MIchPl
Гость
Antonariy,

Я только начал, вёрстку просто примерно накидал...
...
Рейтинг: 0 / 0
24.05.2013, 13:39
| Ответить | Цитировать | Написать  
Почему инпут и кнопка не встают в одну строку ровно?
    #38279482
MIchPl
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MIchPl
Гость
Вот простейший вариант который так же не хочет ровно вставать
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html">
<head>
<style>
#search input
{
	width: 186px;
	height: 25px;
	background: url(img/search.png) no-repeat;
	border: 1px solid #000;
}

#search button
{
	width: 60px;
	height: 25px;
	background: url(img/search_button.png) no-repeat;
	border: 1px solid #000;
}
</style>
</head>
<body>
<div id="search">
	<input type="text" value="" /><button></button>
</div>

</body>
</html>
...
Рейтинг: 0 / 0
30.05.2013, 06:29
| Ответить | Цитировать | Написать  
Почему инпут и кнопка не встают в одну строку ровно?
    #38279487
MIchPl
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MIchPl
Гость
Всё понял. vertical-align разный у инпут и button. установил bottom и всё выровнялось. Тему можно закрыть.
...
Рейтинг: 0 / 0
30.05.2013, 06:48
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Почему инпут и кнопка не встают в одну строку ровно?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38271988&tid=1448287]:
 0ms
get settings:
 6ms
get forum list:
 14ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 147ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 32ms
get tp. blocked users:
 1ms
others: 204ms
total:  417ms
созд. / загр.: 417ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]