对齐列表的跨度

Question

我有这个： http://jsfiddle.net/Lehqyf1t

<ul class="myclass">
    <li><span style="background-color:#f608ff"></span>Text 1</li>
    <li><span style="background-color:#f608ff"></span>Text 2</li>
</ul>

的CSS：

.myclass li span {
  width: 25px;
  height: 25px;
  display: block;
  float: left;
  margin-right: 10px;
}

无论我尝试什么，我都无法让两条线正确对齐。我怎么能解决它？

Answer 1

您必须清除float中的<li>。

http://jsfiddle.net/Lehqyf1t/2/

Answer 2

您可以将float更改为display:inline-block，然后您根本不必担心清除浮动广告。

＆＃13;

＆＃13;

li {
  list-style:none;
  }

.myclass li span{
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
 background-color:#f608ff;
}

＆＃13;

<ul class="myclass">
    <li><span></span>Text 1</li>
    <li><span></span>Text 2</li>
</ul>

＆＃13;

＆＃13;

＆＃13;