2013-09-25 4 views
-1

Привет, я нашел учебное пособие в сети, которое будет соответствовать моей форме скольжения вверх и вниз.Выдвинутая форма CSS Позиционирование

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

Вот ссылка на DEMO

Вот код из учебника

.feedback { 
    position: fixed; 
    left: 0; 
    bottom: 0; 
} 

.feedback a { 
    display: block; 
    height: 20px; 
    width: 100px; 
    text-align: center; 
    background: red; 
    border: 2px solid #fff; 
    outline: 1px solid #a1a1a1; 
    padding: 5px; 
    float: left; 
    cursor: pointer; 
    color: #FFF; 
    font-weight: bold; 
    font-size: 18px; 
} 

И я попытался изменить left:0 к right:0 и float:left к float:right

Это на самом деле работает на Firefox. Но когда я тестирую его в хроме, FORM ломается и уходит далеко вправо ...

ПОМОЩЬ и спасибо!

+0

обратная связь как есть, недействительный селектор. Вам нужно настроить таргетинг как класс (.feedback). – Damien

+0

Я обновил свой ответ. – Alvaro

+0

Извините за опечатку. Обновлен мой вопрос –

ответ

2

Простое изменение left:0 для right:0 должно выполнять эту работу. Я проверил его с примером, который вы предоставили в хроме. Получаемые стили класса являются:

.feedback { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 

UPDATE

Я заметил, что предыдущее решение терпит неудачу, когда скрывается и пытается показать снова форму. Чтобы решить эту проблему:

.feedback { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    width: 482px; /*changed*/ 
} 

.feedback a { 
    display: block; 
    height: 20px; 
    width: 100px; 
    text-align: center; 
    background: #F00; 
    border: 2px solid #FFF; 
    outline: 1px solid #A1A1A1; 
    padding: 5px; 
    float: right; /*changed*/ 
    cursor: pointer; 
    color: #FFF; 
    font-weight: bold; 
    font-size: 18px; 
} 
+0

Спасибо !!! Путем добавления ширины решена проблема. –

+0

@JeremiLiwanag ваш прием! – Alvaro

Смежные вопросы