Сортировка товара

@sashok89 · Регистрация: 04.08.2012

Студворк — интернет-сервис помощи студентам

В макете для сортировки товара нужно сделать меня сортировки. В это меню входит два input и из-за это не могу сделать так чтобы они находились на одном уровне не подскажите как это сделать?
Может еще оцените то как сделана данная работа. Всегда приятно услышать мнение более опытных коллег!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="sorting">
<p>Сортировать по:</p>
<p><a href="#">популярности</a></p>
<p><a href="#">производителю</a></p>
<p><a href="#">цене:</a> от <input type="text" value="5"> до <input type="text" value="100"> у.е</p>
<p class="btn-list-menu"><a href="#">OK</a></p>
<p class="btn-list-menu2"><a href="#">Сравнить товары</a></p>
</div>
</body>
</html>

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
.sorting {
    overflow: hidden;
    font: 11px Tahoma;
    color: #3b3b3b;
}
.sorting p {
    float: left;
    text-align: center;
}
.sorting > p{
    margin-right: 15px;
}
.sorting p a {
    color: #3272b0; 
}
.sorting p a:hover {
    text-decoration: none;
    color: #333333;
}
.sorting p input {
    width: 30px;
}
.btn-list-menu {
    background: url(../images/btn-list-menu.jpg) top no-repeat;
    width: 45px;
    height: 22px;
    margin-left: 20px;
}
.btn-list-menu a {
    margin: 1px;
}
.btn-list-menu2 {
    background: url(../images/btn-list-menu2.jpg) top no-repeat;
    width: 90px;
    height: 28px;
}
.btn-list-menu2 a {
    margin: 1px;
    font: bold 11px Tahoma;
    color: #fff!important;
    text-decoration: none;
}

jsbin

@Ukkas · 27.02.2014, 14:25

sashok89, вот интересные варианты вертикального центрирования http://ruseller.com/lessons.php?rub=2&id=1248

@zme9 · 27.02.2014, 16:48

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

@sashok89 · 27.02.2014, 21:16 **[ТС]**

Сообщение от zme9

настроить ширину и к последнему применить обтекание

а на примере вы не могли бы показать как это сделать?

@zme9 · 27.02.2014, 21:41

Вообще попробовал ваш код и у меня всё встало на одном уровне.

Добавлено через 1 минуту
P.S или они должны быть на одном уровне с текстом слева ?

@sashok89 · 27.02.2014, 21:47 **[ТС]**

область input должна быть на одном уровне в текстом слева.
Уже нашел как сделать!!! Спасибо Ukkas,

как видно на картинке у input пропал вер[ний border. Может кто скажет в чем тут дело?
Ссылка на код

@zme9 · 27.02.2014, 21:51

Заходит под картинку или по отступ который выше.

@sashok89 · 27.02.2014, 21:56 **[ТС]**

Не могу найти как это исправить
Кидаю всю верстку rubl.by.rar
может взгляните как можно устранить данную неприятность!!
файлы list.html и style.css

@zme9 · 27.02.2014, 22:29

В .sorting > p
Добавьте margin-top: 5px; и в .content h1 , отрегулируйте margin как вам нужно.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

@Ukkas 153 / 126 / 39 Регистрация: 02.05.2012 Сообщений: 573
	27.02.2014, 14:25
	sashok89, вот интересные варианты вертикального центрирования http://ruseller.com/lessons.php?rub=2&id=1248 1

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	27.02.2014, 16:48
	Можно разделить область , в которой должно находиться меню , настроить ширину и к последнему применить обтекание. По идеи должно сработать. 0

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	27.02.2014, 21:41
	Вообще попробовал ваш код и у меня всё встало на одном уровне. Добавлено через 1 минуту P.S или они должны быть на одном уровне с текстом слева ? 0

@sashok89 75 / 75 / 11 Регистрация: 04.08.2012 Сообщений: 526 Записей в блоге: 2
	27.02.2014, 21:47 [ТС]
	область input должна быть на одном уровне в текстом слева. Уже нашел как сделать!!! Спасибо Ukkas, как видно на картинке у input пропал вер[ний border. Может кто скажет в чем тут дело? Ссылка на код 0

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	27.02.2014, 21:51
	Заходит под картинку или по отступ который выше. 0

@sashok89 75 / 75 / 11 Регистрация: 04.08.2012 Сообщений: 526 Записей в блоге: 2
	27.02.2014, 21:56 [ТС]
	Не могу найти как это исправить Кидаю всю верстку rubl.by.rar может взгляните как можно устранить данную неприятность!! файлы list.html и style.css 0

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	27.02.2014, 22:29
	В .sorting > p Добавьте margin-top: 5px; и в .content h1 , отрегулируйте margin как вам нужно. 1