html - 文本缩进不适用于 <span> <li> child

Question

我在我的 <li> 中应用了一些样式但奇怪的是，这种风格在标签内不起作用 <span> ，我认为我在父 li 中定义的样式将适用于所有子项，对吗？

有人可以解释一下为什么吗？谢谢。

CSS:

.days li a {
  display: block;
  color: red;
}

.days li a:hover {
  text-decoration: none;
  background-color: red;
  color: white;
}

.days li {
  background-color: black;
  text-indent: 20px;
  line-height: 40px;
  margin: 0 0 10px 0;
  font-weight: 220;
  width: 300px;
}

.days li span {
  font-weight: 300;
  color: blue;
  font-size: 12px;
}

html:

<ul class="days">
  <li><a href="">January 3, 2016 <br><span> Day 01</span></a></li>
  <li>January 3, 2016
    <br><span>january 01</span></li>
  <li>January 3, 2016
    <br><span>february 01</span></li>
</ul>

jsfiddle:https://jsfiddle.net/3mesf9g7/

Answer 1

如果你想让spans继承text-indent，你必须设置display:block，这在内联元素中是不可能的