Сделать эти элементы встроенными / в одну строку с помощью CSS

Question

модуль в моей Joomla CMS выдает следующий код:

<li id="myid" clas="">
   <span>
      <strong>1.</strong>
   </span>

   <dl>
      <dt>
         <span>Some text</span>
      </dt>
  </dl>
</li>

Его нельзя редактировать в html, поскольку он создается с помощью нескольких плагинов.Есть ли способ заставить "Некоторый текст" появляться справа от "1"?через CSS.Я пробовал что-то вроде:

li {
    display: inline;
}

, который не работал.У вас есть какие-нибудь предложения?Большое спасибо!

Answer 1

Вам необходимо установить dl и dt для отображения как inline, потому что их значение по умолчанию block:

#myid dl, #myid dt {
    display: inline;
}

Answer 2

Почему вы не используете упорядоченный список вместо неупорядоченного списка? Это может быть упрощено ..

Но если вы хотите использовать свой код, вы должны удалить тег "" из номера списка, потому что он будет устаревшим. Решением является добавление class = 'strong' в ваш тег для вашего номера и добавление дополнительных css, вот код для 'strong' class:

#myid .strong{
    font-weight:bold;
}

Ваш HTML-код:

<li id="myid" clas="">
   <span class="strong">1.</span><dl>
      <dt>
         <span>Some text</span>
      </dt>
  </dl>
</li>