Изменение диапазона будет игнорировать CSS?

Question

Изменение диапазона будет игнорировать CSS?

0

У меня есть это поле диапазона и справа показывает, какое значение оно сейчас, но число немного ниже диапазона значений, как это исправить?:

Это, как я хочу:

HTML/CSS/JavaScript:

#ranger {
    vertical-align: middle;
    line-height:normal;
    margin-left:4px;
    margin-top:-10px;
}
input {
    width:246px;
    margin:2px 1px;
    padding:2px;
}

label {
    display : block;
}

label span {
    display : inline-block;
    width : 150px;
}

<input type="range" id="range" name="code" value="1" min="1" max="100" onchange="document.getElementById('ranger').innerHTML = document.getElementById('range').value;" /><span id="ranger">1</span>

Пример: http://jsfiddle.net/37B95/

user2897922 17 нояб. 2013, в 20:59

Источник

0

Какой браузер? Хром .. Firefox, IE? ..
Wagner Leonardi 17 нояб. 2013, в 19:03
0

1 вероятно, не поможет, попробуйте 1
rorypicko 17 нояб. 2013, в 19:03
0

Google Chrome да @ RoryPicko92: ну, теперь номер отверстия немного меньше. См редактировать для полного CSS.
user2897922 17 нояб. 2013, в 19:04
0

Я не могу изменить ползунок диапазона в вашем вопросе, поэтому я не могу проверить его тщательно?
adeneo 17 нояб. 2013, в 19:05
0

@adeneo, это будет изображение ползунка диапазона.
rorypicko 17 нояб. 2013, в 19:06
0

@ RoryPicko92 совет решил, что? Потому что только этот короткий код прекрасно работает в Chrome, возможно, в других HTML, CSS ... даже JS ломает это.
Wagner Leonardi 17 нояб. 2013, в 19:06
0

Дерьмо, правда! Неудивительно, что он не будет скользить, OP должен заменить изображение реальным слайдером. Кстати , число всегда кажется мне низким -> jsfiddle.net/36qqZ
adeneo 17 нояб. 2013, в 19:07
0

jsfiddle.net/37B95, но вы не можете сделать что-нибудь, чтобы получить число прямо рядом с диапазоном?
user2897922 17 нояб. 2013, в 19:12
0

Попробуйте с vertical-align: top
Anto Jurković 17 нояб. 2013, в 19:14
0

Ах, спасибо @Anto jsfiddle.net/37B95/2
user2897922 17 нояб. 2013, в 19:17

Показать ещё 8 комментариев

Теги:

javascript

html

css

range

2 ответа

0

Одним из возможных решений является установка vertical-align: top:

+ Изменить

#ranger {
    vertical-align: middle;
...
}

#ranger {
    vertical-align: top;
...
}

Anto Jurković 17 нояб. 2013, в 16:45

Ещё вопросы

1 вероятно, не поможет, попробуйте 1
Google Chrome да @ RoryPicko92: ну, теперь номер отверстия немного меньше. См редактировать для полного CSS.
Я не могу изменить ползунок диапазона в вашем вопросе, поэтому я не могу проверить его тщательно?
@adeneo, это будет изображение ползунка диапазона.
@ RoryPicko92 совет решил, что? Потому что только этот короткий код прекрасно работает в Chrome, возможно, в других HTML, CSS ... даже JS ломает это.
Дерьмо, правда! Неудивительно, что он не будет скользить, OP должен заменить изображение реальным слайдером. Кстати , число всегда кажется мне низким -> jsfiddle.net/36qqZ
jsfiddle.net/37B95, но вы не можете сделать что-нибудь, чтобы получить число прямо рядом с диапазоном?

Vitim.us · Accepted Answer · 2013-11-17T17-24-00.000Z

использование

display: inline-block;

Обычно я использую временную схему css для тонкой настройки моих стилей

selectors{
    outline: 1px solid red;
}

http://jsfiddle.net/Victornpb/xcBcs/