Выровнять элементы

@kotik2 · Регистрация: 22.03.2011

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

Как сделать так, чтобы было ровно инпут со стрелкой. при уменьшении окна браузера (ctrl-) создается впечатление , что стрелки меньше.
input со стрелками

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="count">
        <div class="counter">
            <input type="text" class="counter_input" size="3" 
                                                    name="<?echo $arParams['PRODUCT_QUANTITY_VARIABLE']?>" value="1" id="<?echo $arParams['PRODUCT_QUANTITY_VARIABLE']?><?=$arElement["ID"];?>"> 
            
        </div>
                <div class="counter">
                       <div class="quantity_control">
                <a class="PlusList plus" href="javascript:void(0)" ></a>
                <a class="MinusList minus" href="javascript:void(0)"></a> 
            </div>
                 </div>
 
        
    </div>

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
            .count>.counter input.counter_input{
    height:10px;
    max-width:50px;
}
.counter  .quantity_control a.plus{
    background:url('images/bg_up.jpg') no-repeat;
    border: 1px solid #d8d8d8;  
    display: block;
    height: 6px;
    text-align: center;
    width: 6px;
}
.counter  .quantity_control a.minus{
    background:url('images/bg_down.jpg') no-repeat;
    border: 1px solid #d8d8d8;
    display: block;
    height: 6px;
    text-align: center;
    width: 6px;
}

@cellse · 05.11.2015, 13:37

kotik2, почему бы не воспользоваться

HTML5
1
<input type="number" />

@kotik2 · 05.11.2015, 15:25 **[ТС]**

cellse, http://htmlbook.ru/html/input/type
не поддерживает все браузеры....

Добавлено через 1 час 37 минут
cellse, http://htmlbook.ru/html/input/type
не поддерживает все браузеры....

HTML5
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
<html>
<head>
 
<style type="text/css">
 
.counter {
    width: 60px; /* Ширина поля с кнопкой */
    border: 1px solid #000; /* Параметры рамки */
    height: 14px; /* Минимальная высота */
    position:relative;
}
.counter input.counter_input {
    border: none; /* Убираем рамку */
    outline: none; /* Убираем свечение в Chrome и Safari */
    -webkit-appearance: none; /* Убираем рамку в Chrome и Safari */
    width: 50px; /* Ширина поля */
    height:10px;
    padding:0px;
    margin:0px;
    vertical-align: middle; /* Выравнивание по середине */
    position:absolute;
}
  .quantity_control {
    padding:0px;
    margin:0px;
    width: 6px; /* Ширина кнопки */
    height: 10px; /* Высота кнопки */
    position:absolute;
    top:0;
    right:1;
  }
.counter .quantity_control a.plus{
    background:url('images/bg_up.jpg') no-repeat;
    border: 1px solid #d8d8d8;  
    display: block;
    height: 5px;
    text-align: center;
    width: 6px;
}
.counter .quantity_control a.minus{
    background:url('images/bg_down.jpg') no-repeat;
    border: 1px solid #d8d8d8;
    display: block;
    height: 5px;
    text-align: center;
    width: 6px;
}
</style>
</head>
<body>
    <div class="count">
        <div class="counter">
            <input type="text" class="counter_input" size="3" 
                                                    name="<?echo $arParams['PRODUCT_QUANTITY_VARIABLE']?>" value="1" id="<?echo $arParams['PRODUCT_QUANTITY_VARIABLE']?><?=$arElement["ID"];?>"> 
            <div class="quantity_control">
                <a class="PlusList plus" href="javascript:void(0)" ></a>
                <a class="MinusList minus" href="javascript:void(0)"></a> 
            </div>
        </div>
        
    </div>
</body>
</html>

тоже при уменьшении окна Ctrl- ,получается аналогичная ситуация...., как и выше...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Выровнять элементы

Решение