дочерняя позиция в DIV с направлением RTL

#html #css

#HTML #css

Вопрос:

Я создаю пользовательское поле тегов, которое показано на рисунке для моего веб-сайта.

введите описание изображения здесь

В нижней части окна есть строка поиска, в которой пользователь выполняет поиск тегов. ниже этого есть DIV, который показывает результаты поиска, полученные с помощью ajax. мне нужно, чтобы для ее направления было установлено значение RTL, из-за чего полоса прокрутки отображается с левой стороны. но, как вы можете видеть на картинке, с правой стороны всегда есть лишнее пустое пространство, хотя для этого не установлено правое поле. проблема возникает в Chrome. отлично работает в firefox!

Я не смог включить здесь полный код, но в jsfiddle есть простой пример: jsfiddle.net/XP3Hc/

1. Удалить padding: 10px; и margin:5px;

2. Я сделал это, но все равно с правой стороны есть дополнительный пробел, ширина которого равна ширине полосы прокрутки! 🙁

3. Проверьте ниже, я опубликовал решение, и я вижу его правильно

4. В Firefox это кажется нормальным. но в Chrome у меня все еще есть эта проблема! 🙁

Ответ №1:

Если я правильно понял вопрос, и вы хотите, чтобы пространство справа было удалено.

Измените на это:

 *{
    margin:0;
    padding:0;
}

.container{
    width: 378px; 
    height: auto; 
    float: right; 
    margin-top: -1px;
    background-color: #fff;
    border: solid 1px #999;
    max-height: 200px;
}
.container div{
    width: 100%;
    direction: rtl;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 30px;
    background-color: #999; 
}

ДЕМОНСТРАЦИЯ

1. моя проблема только в Google Chrome! теперь пробел перемещается с правой стороны на левую!

2. Я думаю, что эта проблема как-то связана с самим Chrome. 🙁

3. Обновлен ответ 🙂

4. Спасибо! Я только что немного обновил ваш код, и моя проблема решена! Спасибо! 🙂 jsfiddle.net/9z8Lq