Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Почему инпут и кнопка не встают в одну строку ровно? / 11 сообщений из 11, страница 1 из 1
24.05.2013, 11:38
    #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:49
    #38271623
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему инпут и кнопка не встают в одну строку ровно?
MIchPl, в каком браузере?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.05.2013, 11:52
    #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, 12:03
    #38271670
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему инпут и кнопка не встают в одну строку ровно?
Antonariy, если у инпута убрать рамку, то кнопка не переносится. По крайней мере в Chrome.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.05.2013, 13:21
    #38271982
MIchPl
MIchPl
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему инпут и кнопка не встают в одну строку ровно?
skyANA,

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

Не могу понять почему они не хотят вставать на одной линии. Высота у них одинаковая, не понятно, что за отступы
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.05.2013, 13:24
    #38271988
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему инпут и кнопка не встают в одну строку ровно?
Код страницы полностью приведте
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.05.2013, 13:28
    #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:39
    #38272049
MIchPl
MIchPl
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему инпут и кнопка не встают в одну строку ровно?
Antonariy,

Я только начал, вёрстку просто примерно накидал...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.05.2013, 06:29
    #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:48
    #38279487
MIchPl
MIchPl
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Почему инпут и кнопка не встают в одну строку ровно?
Всё понял. vertical-align разный у инпут и button. установил bottom и всё выровнялось. Тему можно закрыть.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Почему инпут и кнопка не встают в одну строку ровно? / 11 сообщений из 11, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 409ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448287]:
 0ms
get settings:
 8ms
get forum list:
 17ms
check forum access:
 5ms
check topic access:
 5ms
track hit:
 71ms
get topic data:
 12ms
get forum data:
 4ms
get page messages:
 46ms
get tp. blocked users:
 2ms
others: 239ms
total:  409ms
x
x
Закрыть


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