试探列表中的::marker

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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 th

剩余80%内容付费后可查看

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

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

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