Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.04.2015, 02:52
Аспирант
Отправить личное сообщение для kilohertz_. Посмотреть профиль Найти все сообщения от kilohertz_.
 
Регистрация: 07.12.2014
Сообщений: 31

margin и form
Пытаюсь сдвинуть button (b-search) вниз на 3px, но почему-то он спускается и input тоже! Что не так то?


<form>
  <input class="b3radius" type="text" placeholder="Поиск по сайту">
  <button id="b-search"><img src="/style/img/button_search.png"></button>
</form>


#header-nav form {
	float: right;
	margin-top: 4px;
	margin-right: 8px;
}
#header-nav form input {
	height: 25px;
	border: none;
	background-color: #e8e8e8;
	padding: 0px 9px;
	width: 152px;
}
#b-search{
	border: none; 
	background: inherit;
}

Последний раз редактировалось kilohertz_., 12.04.2015 в 03:02.
Ответить с цитированием
  #2 (permalink)  
Старый 12.04.2015, 19:35
Аспирант
Отправить личное сообщение для kilohertz_. Посмотреть профиль Найти все сообщения от kilohertz_.
 
Регистрация: 07.12.2014
Сообщений: 31

Решил сделать отдельно, посмотреть поведение, ничего не изменилось, по-прежнему вниз съезжают оба элмента. Помогите *-*

<head>
	<meta charset="utf-8">
	<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="_1">
			<div style="display: inline-block;"><input class="b3radius" type="text" placeholder="Поиск по сайту"></div>
			<div style="display: inline-block; margin-top: 5px;"><button id="b-search"><img src="/style/img/button_search.png"></button></div>
	</div>
</body>


* {
	margin: 0px;
	padding: 0px;
}
body #_1 {
	width: 1000px;
	height: 35px;
	border: 1px solid red;
	margin: 0 auto;
}
Ответить с цитированием
  #3 (permalink)  
Старый 13.04.2015, 08:15
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

Сообщение от kilohertz_.
Помогите
Ты в состоянии сделать полный тестовый пример? Что ты эти огрызки кидаешь...
Ответить с цитированием
  #4 (permalink)  
Старый 14.04.2015, 04:56
Аватар для mikhail.golovkin
Интересующийся
Отправить личное сообщение для mikhail.golovkin Посмотреть профиль Найти все сообщения от mikhail.golovkin
 
Регистрация: 11.12.2013
Сообщений: 16

Особенности поведения строчных элементов.

#b-search {
    vertical-align: top;
    /** ... */
}
Ответить с цитированием
  #5 (permalink)  
Старый 15.04.2015, 23:56
Аспирант
Отправить личное сообщение для igormog Посмотреть профиль Найти все сообщения от igormog
 
Регистрация: 08.04.2015
Сообщений: 39

display: inline-block;
заменить на
display: block;

И лучше не использовать инлайн-стили style="display: inline-block;"
Только в крайнем случае, если это действительно нужно.
Ответить с цитированием
  #6 (permalink)  
Старый 16.04.2015, 16:00
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Сообщение от igormog Посмотреть сообщение
display: inline-block;
заменить на
display: block;

И лучше не использовать инлайн-стили style="display: inline-block;"
Только в крайнем случае, если это действительно нужно.
Почему?
(Поддержка браузеров хорошая, единственный недостаток это отступы то бокам при переносе блоков в новую строку)
Я считаю что это свойство "Нужно использовать".
Ответить с цитированием
  #7 (permalink)  
Старый 16.04.2015, 17:55
Аспирант
Отправить личное сообщение для igormog Посмотреть профиль Найти все сообщения от igormog
 
Регистрация: 08.04.2015
Сообщений: 39

Кhfts_rider, просто потому, что если смешить содержимое документа c его оформлением, то такой код будет тяжелее поддерживать
Ответить с цитированием
  #8 (permalink)  
Старый 17.04.2015, 15:56
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Сообщение от igormog Посмотреть сообщение
Кhfts_rider, просто потому, что если смешить содержимое документа c его оформлением, то такой код будет тяжелее поддерживать
Ничего не понял)))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
10 плавающих уровней Kvark jQuery 8 08.05.2013 16:09
тег form почему и как исправить jonix Общие вопросы Javascript 8 11.12.2012 06:29
Свойство margin в блочных элементах antserg (X)HTML/CSS 9 03.09.2012 13:15
Не работает аякс в jQuery Form Ticksy jQuery 4 19.07.2011 12:55
form внутри form dabutch Общие вопросы Javascript 4 23.03.2009 09:56