Проблема с неупорядоченным списком

Question

Итак, у меня есть список «Лучшие новости», и он занимает только небольшой раздел сбоку страницы. Но если заголовок длиннее ширины div, он не нарушает предложение. Это просто ставит все на следующей строке. Мне не удалось найти решение для этого.

http://codepen.io/anon/pen/WrjPQo

<li> 
    <p class="number">1</p> 
    <a href="#"><h3>Virtual Reality Being Used in School</h3></a> 
</li> 

Спасибо

Answer 1

Вы можете решить эту проблему путем добавления номера внутри H3.

Или вы могли бы даже использовать нумерацию списка или псевдоэлемент ::before H3 для генерации нумерации, поэтому вам даже не нужна разметка для него.

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

ul.headings { 
 
list-style-type: none; 
 
} 
 
.headings { 
 
    counter-reset: header-counter; 
 
} 
 
.headings li::before { 
 
    /* Showing and incrementing the counter */ 
 
    content: counter(header-counter); 
 
    counter-increment: header-counter; 
 

 
    /* Some styling to make it red and round and white, etc. */ 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 20px; 
 
    background-color: red; 
 
    color: white; 
 
}

<ul class="headings"> 
 
    <li>Lorem ipsum</li> 
 
    <li>Lorem ipsum</li> 
 
    <li>Lorem ipsum</li> 
 
    <li>Lorem ipsum</li> 
 
    <li>Lorem ipsum</li> 
 
</ul>

Answer 2

р блоковый элемент, поэтому он занимает всю доступную ширину его контейнера. Установите отображение: встроенный блок для элемента абзаца, или, лучше, замените его на span.