如何在不破坏CSS的情况下添加换行符

Question

以下是我的HTML

_count

关联的css是

_stats

这就是我所拥有的。我试图在8月下方有15个没有任何额外的空间或改变高度。添加br标签会导致css打破圆圈。我尝试删除行高，但没有工作。我尝试在我希望换行的地方之间添加跨度，将显示属性设置为块，但仍然具有相同的行为。

Sassmeister代码：http://sassmeister.com/gist/6c73b40a08d130566cfb

Answer 1

以下是使用display: table，display: table-cell和vertical-align: middle在日期气泡中垂直对齐两行文字的方法。

结果截图：

现场演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

删除line-height属性。在p标签中包裹sep。你因为行高而得到了空间。

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

Answer 3

您还不清楚自己需要的显示器，但这是一个选项：

＆＃13;

＆＃13;

#include <iostream>
using namespace std;
int main()
{
     int mm, dd, yyyy;
     cout << "What is your birthdate?" << endl << endl;
     cout << "Month: ";
     cin >> mm;
     cout << endl << "Day: ";
     cin >> dd;
     cout << endl << "Year: ";
     cin << yyyy;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

将数字包裹在一个范围内，然后添加一些css3：transform: translateY(-40px)来移动该数字

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 */
  }
}