Как добавить разрыв строки, не нарушая CSS в уль Li

Question

Ниже мой HTML

<ul> 
    <li> 
    Jan 
    </li> 
    <li> 
    Feb 
    </li> 
    <li> 
    Mar 
    </li> 
    <li> 
    Apr 
    </li> 
    <li> 
    May 
    </li> 
    <li> 
    Jun<span>1</span> 
    </li> 
    <li> 
    Jul<span><span class="more">30</span> 
    </li> 
    <li> 
    Aug<br>15 
    </li> 
    <li> 
    Sep 
    </li> 
    <li> 
    Oct 
    </li> 
    <li> 
    Nov 
    </li> 
    <li> 
    Dec 
    </li> 
</ul> 

И связано КСС

ul { 
    list-style: none; 
    li { 
    width: 60px; 
    line-height: 60px; 
    border-radius: 50%; 
    color: #019ed5; 
    border: 1px solid #019ed5; 
    background-color: #FFFFFF; 
    cursor: pointer; 
    text-align: center; 
    } 
    span.year{ 
    color: red; 
    display: block; 
    } 
    span.more-statement{ 
    position: absolute; 
    color:black; 
    width:20px; 
    height:20px; 
    border-radius:50%; 
    background:#019ed5; 
    font-size:10px; 
    line-height:20px; 
    color: white; 
    } 
} 

Это то, что у меня есть. Я пытаюсь иметь 15 прямо ниже августа без лишних пробелов или изменения высоты. Добавление ярлыка br приводит к тому, что css разбивает круг. Я попытался удалить высоту линии, но не работал. Я попробовал добавить промежуток между местами, где я хочу, чтобы свойство отображения строки делало блок как блок, но по-прежнему имеет такое же поведение.

Код на Sassmeister: http://sassmeister.com/gist/6c73b40a08d130566cfb

Answer 1

Удалить атрибут высоту строки. Оберните sep в теге p. Вы получаете пространство из-за высоты линии.

<ul> 
    <li> 
    <p>Sep </p> <span class="year">15 </span> 
    </li> 
</ul> 

Answer 2

Вы не были четко дисплей вам требуется, но вот один вариант:

ul { 
 
    list-style: none; 
 
} 
 
li { 
 
    width: 60px; 
 
    border-radius: 50%; 
 
    color: #019ed5; 
 
    border: 1px solid #019ed5; 
 
    background-color: #FFFFFF; 
 
    cursor: pointer; 
 
    text-align: center; 
 
} 
 
span {display: block; line-height: 30px;}

<ul> 
 
    <li> 
 
    <span>Jan</span> 
 
    <span>15</span> 
 
    </li> 
 
</ul>

Answer 3

Ниже один способ вертикального выравнивания двух строк текста внутри вашего с использованием display: table, display: table-cell, и vertical-align: middle.

Скриншот результата:

Демо:

ul { 
 
    list-style: none; 
 
    display: table; 
 
} 
 
li { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
    color: #019ed5; 
 
    border: 1px solid #019ed5; 
 
    background-color: #FFFFFF; 
 
    cursor: pointer; 
 
    text-align: center; 
 
}

<ul> 
 
    <li>Jan<br />15</li> 
 
</ul>

Answer 4

сохранить номер, завернутое в пролете затем добавить CSS3:, чтобы переместить это число до

http://jsfiddle.net/8azj0k13/

li { 
    ... 
    span { 
    display: block; 
    -webkit-transform: translateY(-40px); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: translateY(-40px); /* IE 9 */ 
      transform: translateY(-40px); /* Firefox 16+, IE 10+, Opera */ 
    } 
}