Расположите три кнопки на одной центральной линии

-4

У меня есть три отдельные кнопки внутри одной и той же строки и контейнера, однако из-за содержания над ними они не все находятся на одной горизонтальной линии.

Изображение 318928

Это ухудшается на большом экране

Как я могу заставить все эти кнопки сидеть в одной центральной точке?

Онлайн-адрес: http://185.123.97.138/~kidsdrum/moneynest.co.uk/

HTML

<button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
  • 0
    просто удалите эту кнопку #step1button для первой кнопки. у него есть margin-top
  • 1
    Вопросы, требующие помощи по коду, должны включать самый короткий код, необходимый для его воспроизведения в самом вопросе . Хотя вы указали ссылку на сайт или пример , если ссылка станет недействительной, ваш вопрос не будет иметь значения для других будущих пользователей SO с такой же проблемой.
Показать ещё 3 комментария
Теги:

3 ответа

0
Лучший ответ

Проблема с использованием отдельной строки заключалась в том, что на мобильном устройстве все три кнопки (в отдельном ряду) отдалились от соответствующего контента.

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

Изображение 504667

Добавив простой <br/> я смог нажать одну нечетную кнопку на ту же строку, что и две другие кнопки.

Затем я удалил:

              #step1button {
margin-top: 30px;
}

Таким образом, окончательный HTML выглядел так:

   <div class="container-fluid">
     <div class="row">
<div class="fadein bg-3 text-center">    
  <h3 class="h3big">What do you need help with?</h3><br>
    <div class="col-sm-4">
         <img src="/img/button-1.png" alt="button-1" class="middleimages">
         <div class="box-content">
                       <p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
                       <figure><img src="/img/pound-coins.jpg" alt="saving money image" title="Saving money" class="tripleimage">
                       <figcaption><b>Feel like you're walking on a tightrope every day?</b> <br>Stuck in a pay cheque to pay cheque cycle, can't keep your budget in check, dont have a budget, use credit cards or have no savings? <br><br>
                        <br />
                       <b>Lesson 1</b> - Learn how I escaped the pay cheque to pay cheque cycle.</figcaption>

                       </figure>


<button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>


              </div>
              </div>
Поделиться
2

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

Таким образом, если текст в одном из столбцов увеличивается по какой-либо причине (добавляется текст, разные размеры экрана), вся строка "кнопок" будет сдвигаться одинаково, и кнопки всегда будут поддерживать одну и ту же базовую линию

Надеюсь, что имеет смысл

Поделиться
  • 0
    он мог бы также изменить эту строку с этими элементами, чтобы они были гибкими, не так ли?
  • 0
    Да, но это в значительной степени лишило бы IE правильного отображения из-за того, что flex-box не получил такой широкой поддержки. Конечно, можно использовать библиотеку polyfill. Но отображение так просто, как это действительно не должно зависеть от JS
Показать ещё 4 комментария
0

Измените строку в homepagestyle.css

#step1button {
    margin-top: 21px;
}

Это позволит исправить вашу проблему

Поделиться
  • 0
    Ваше решение будет работать только на определенной ширине экрана. Я смотрю его в 1920x1080, и это не решает проблему вообще. Сдвиг окна в одну сторону, в результате чего ширина составляет 960 пикселей, усугубляет проблему
  • 0
    В этом случае он должен написать код кнопки вне div. По крайней мере, я думаю, что с этим легче справиться.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню