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

[wwizard]

Всем доброго дня. Сайт на 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;
}

 

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

 

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

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

 

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

Змінено 2 червня 2023 користувачем wwizard

[Seofisher]

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

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

[Etegro]

А почему бы не сделать по сетке бутстрап 6 колонок?

[wwizard]

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

[todaymars]

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;
}