Блог

Главная - Вопросы по программированию - Предоставление пространства между двумя кнопками

Предоставление пространства между двумя кнопками

#html #css #margin #limesurvey

#HTML #css #поле #сбор лайма #limesurvey

Вопрос:

У меня ситуация, когда я не могу изменить файлы css, но не html / php. У меня есть две кнопки на странице с идентификаторами «moveprevbtn» и «movenextbtn». В настоящее время они расположены близко. Используя Css или используя любые скрипты, которые мне нужны, чтобы распределить их. Я не могу этого сделать.

С помощью CSS я попробовал что-то вроде этого,

   #moveprevbtn {
    position: relative;
    left: -30px;
}

#movenextbtn {
    position: relative;
    right: 30px;
}

Но мне это не очень помогло. Любое предложение.

Я говорю в контексте LimeSurvey. PHP / MySQL

Здесь идентификаторы предыдущей кнопки и следующей кнопки соответственно

Здесь идентификаторы предыдущей кнопки и следующей кнопки соответственно. Я могу редактировать файлы CSS. Я должен перемещать их влево и вправо, предоставляя пространство между ними.

Комментарии:

1. Вы можете изменить свой CSS или нет? И как мы можем помочь вам с вашим CSS, не видя вашей разметки?

2. не могли бы вы показать живую демонстрацию вашего кода?

3. Вы хотите, чтобы они были сверху / снизу ИЛИ рядом?

Ответ №1:

Похоже, вы хотите, чтобы кнопки располагались рядом и были просто разнесены дальше друг от друга. Если это правильно, это сработает.

 #moveprevbtn {
    position: absolute;
    left: 30px;
}

#movenextbtn {
    position: absolute;
    right: 30px;
}

В качестве АЛЬТЕРНАТИВЫ:

вы могли бы просто добавить пространство между двумя кнопками следующим образом:

   #moveprevbtn {
    position: relative;
    margin-left: -30px;
  }

#movenextbtn {
    position: relative;
    margin-right: -30px;
}

Первый вариант разместит ваши кнопки на расстоянии 30 пикселей справа и 30 пикселей слева от вашего порта просмотра.

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

Комментарии:

1. Несколько причин, по которым это ничего не изменит. Либо потому, что в вашей таблице стилей есть правила CSS, которые переопределяют эти правила, у вас есть вторая таблица стилей, которая загружается после загрузки этой таблицы стилей, изменения сохраняются в неправильном месте, либо стили для кнопок являются встроенными стилями. Еще одна возможность заключается в том, что он менял стили, и предыдущие результаты были кэшированы. Это приведет к тому, что не будет похоже, что что-то меняется. 🙂

Ответ №2:

Если я правильно понял вопрос, и вы хотите, чтобы ваши кнопки располагались рядом с пробелом посередине:

Добавить margin-left в #movenextbtn 

 #movenextbtn {
    background: transparent url(myNextImage.png) 0 0 no-repeat;
    margin-left:100px;
    position: relative;
}

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