试探列表中的::marker

CSS中的列表包括有序、无序和定义列表,不过今天要扯的是是无序列表和有序列表。回忆一下,不管是有序还是无序列表,对于样式上都包括了list-style-imagelist-style-typelist-style-position三个样式属性,而他们又能简写成list-style。至于怎么用?这里不做过多阐述,如果不清楚的可以查看官网:

血案的起源

前几天有位同学问过一个问题,<li>元素中的子元素浮动(float:left)之后,列表的项目符号会跑到浮动元素的后面。这个问题似乎在三年前碰到过,但又有那么点不一样。先来上张图吧,一图解胜过千言万语:

lists

简单看看代码:

<ul>
    <li>
      <span class="title">我是标题</span>
      <span class="content">我是描述内容,我就是描述内容,我不是别的</span>
    </li>
    ...
    <li>
      <span class="title">我是标题</span>
      <span class="content">我是描述内容,我就是描述内容,我不是别的</span>
    </li>
  </ul>

对应的CSS:

*{
  margin: 0;
  padding: 0;
}
ul {
  width: 350px;
  margin: 50px auto;
  border: 1px solid green;
  list-style-position: inside;
}
li {
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
  font-size: 16px;
  color: #fff;
}
li:after {
  content:"";
  display: table;
  clear:both;
}
.title {
  float: left;
  background-color: orange;
}
.content {
  background-color: #f63;
  overflow: hidden;
  display: block;
}

这只是其中一种情形,再这个问题上,再扩展一下:li中的子元素.title向右浮动,而.content不动:

.title {
  float: right;
  background-color: orange;
}

效果如下:

lists

接下来再看一个情形,li中的子元素.title向左浮动(float:left),.content元素向右浮动(float:right):

.title {
  float: left;
  background-color: orange;
}
.content {
  background-color: #f63;
  float:right;
  max-width: 80%;
}

效果如下:

lists

上面的几种情形都是在Chrome浏览器下的测试效果,其实在Firefox浏览器也存在这样的现象,只是略有一点差别而以,比如最前面的示例,在Firefox下的效果就成这样了:

lists

现在纠结了,怎么就成这样了呢?我们一起来看看。

查找原因

这个问题纠结了我很久,最后在W3C规范中找到原因所在。

先来看看CSS2.1中这样说:

outside

The marker box is outside the principal block box. The position of the list-item marker adjacent to floats is undefined in CSS 2.1. CSS 2.1 does not specify the precise location of the marker box or its position in the painting order, but does require that for list items whose 'direction' property is 'ltr' the marker box be on the left side

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css3-lists-marker.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部