PHP / HTML проблема размещения содержимого div рядом друг с другом

Question

У меня небольшая проблема. Я пытаюсь создать древовидное представление ряда категорий, извлеченных из базы данных. Эти категории следует разместить рядом друг с другом (с небольшим промежутком между ними). Пытался довольно css стилей и c, но всегда помещал эти категории друг под другом, независимо от того, что я пробую. Также несколько раз очищал мой кеш безуспешно. У кого-нибудь есть идеи, как это сделать? Это динамически, поэтому может быть 2, 3 или более категорий, которые будут отображаться рядом друг с другом. Эти категории должны иметь древовидное представление соответствующих подкатегорий и документов, которые еще не закодированы.

Мой соответствующий код на данный момент:

<div class="d-flex two-column-wrapper" id="twocols-wrapper">

<main class="instruments-wrapper">
<div class="card bg-light col-md-6 offset-md-3">
  <div class="card-header row align-items-center">
    <h3 class="text-center"><?=$this->instrument->name?></h3>
  </div>
  <div class="content-wrapper">
    <div class="content">
    <?php foreach ($this->categories as $category):?>
      <div class="category">
            <li class='active'><?=$category->name?></li>
        </div>
    <?php endforeach;?>
        </div>
      </div>
    </div>
  </main>
</div>

И в CSS:

content{
  width: auto;
  position: fixed;
  overflow: visible;
}

.category{
   width: 200px;
  display: inline-block;
  float: left;
}

Любая помощь приветствуется!

Answer 1

Если вы используете bootstrap 4, вы можете использовать d-display-block class:

content{
  width: auto;
  position: fixed;
  overflow: visible;
}

.category{
   width: 200px;
  display: inline-block;
  float: left;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="d-flex two-column-wrapper" id="twocols-wrapper">

<main class="instruments-wrapper">
<div class="card bg-light col-md-6 offset-md-3">
  <div class="card-header row align-items-center">
    <h3 class="text-center"><?=$this->instrument->name?></h3>
  </div>
  <div class="content-wrapper">
    <div class="content">
      <div class="category">
            <li class='active d-inline-block'>AAA</li>
            <li class='active d-inline-block'>BBBB</li>
            <li class='active d-inline-block'>CCCC</li>
            <li class='active d-inline-block'>DDDD</li>
        </div>
        </div>
      </div>
    </div>
  </main>
</div>

Answer 2

Вам необходимо использовать свойство display: inline-block; CSS в элементе <li>. Вроде так ...

<div class="d-flex two-column-wrapper" id="twocols-wrapper">

<main class="instruments-wrapper">
<div class="card bg-light col-md-6 offset-md-3">
  <div class="card-header row align-items-center">
    <h3 class="text-center">Drum</h3>
  </div>
  <div class="content-wrapper">
    <div class="content">
      <div class="category">
            <li class='active'>Snare</li>
            <li class='active'>High-hat</li>
            <li class='active'>Base</li>
            <li class='active'>Cymbal</li>
        </div>
        </div>
      </div>
    </div>
  </main>
</div>

CSS

.category li {
  display: inline-block;
  margin-right: 1em; 
}

Здесь рабочая версия: https://jsfiddle.net/fraggley/wrox5198/7/