Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

Html + Css - нужна помощь в правке кода кнопки...


 Поделиться

Рекомендованные сообщения

Всем доброго дня. Сайт на ocStore 2.3

Нужно нное количество кнопок в ряд - над категориями, такой себе своеобразный пользовательский фильтр)). Но надо чтобы они шли именно в ряд скажем если их 6 кнопок, а если более то тогда перенос на следующий ряд. Кнопки я реализовал следующим кодом, с помощью модуля HTML

 

<h2 data-placeholder="Перевод" dir="ltr" id="tw-target-text" style="text-align: center;"><strong style="color: inherit; font-family: inherit;"><a class="btn main1-btn" href="ссілка/ссілка/">07</a></strong><br></h2><h2 data-placeholder="Перевод" dir="ltr" id="tw-target-text" style="text-align: center;"><strong style="color: inherit; font-family: inherit;"><a class="btn main1-btn" href="ссілка/ссілка/">09</a></strong><br></h2><h2 data-placeholder="Перевод" dir="ltr" id="tw-target-text" style="text-align: center;"><strong style="color: inherit; font-family: inherit;"><a class="btn main1-btn" href="ссілка/ссілка/">12</a></strong><br></h2><h2 data-placeholder="Перевод" dir="ltr" id="tw-target-text" style="text-align: center;"><strong style="color: inherit; font-family: inherit;"><a class="btn main1-btn" href="ссілка/ссілка/">18</a></strong><br></h2><h2 data-placeholder="Перевод" dir="ltr" id="tw-target-text" style="text-align: center;"><strong style="color: inherit; font-family: inherit;"><a class="btn main1-btn" href="ссілка/ссілка/">24</a></strong><br></h2><h2 data-placeholder="Перевод" dir="ltr" id="tw-target-text" style="text-align: center;"><strong style="color: inherit; font-family: inherit;"><a class="btn main1-btn" href="ссілка/ссілка/">36</a></strong><br></h2>

 

Код кнопки в файле: stylesheet.css

 

.main1-btn {
	background: #9ea3a5;
	color: #fff;
	font-size: 18px;
	border-color: #818587;
	padding: 10px 30px;
	font-weight: 600;
}

 

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

 

Как сейчас: Ссылка

Увидеть можно тут.

 

А мне надо именно в ряд. И в Десктопной и в мобильной. В ряд и расположение от центра страницы.

Изменено пользователем wwizard
Ссылка на комментарий
Поделиться на других сайтах


почитайте про display:flex

а вообще то, чат GPT вам поможет с такими вопросами

Ссылка на комментарий
Поделиться на других сайтах

Мм. А конкретная помощь мне бы не помешала((

Ссылка на комментарий
Поделиться на других сайтах


html

Скрытый текст

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
</div>

css

Скрытый текст

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  background: #ccc;
  padding: 5px;
  width: 50px;
  height: 50px;
  margin: 10px;
  line-height: 50px;
  color: #222;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

 

Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.