图片中的 html/css 面包屑

Question

我坚持启动 CSS 来构建面包屑，如下图链接所示。感谢您的帮助 :)
图片- http://s1015.photobucket.com/user/dbf1655/media/bred.png.html

这是我的html

<ul class="breadcrumbs">
  <li>Home</li>
  <li>Course</li>
  <li>Subject</li>
  <li class="active">English</li>
</ul>

Answer 1

有很多方法。这是一个不需要任何额外标记的:

.breadcrumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.breadcrumbs:before {
    content: "";
    display: block;
    height: 3px;
    background: blue;
    position: relative;
    top: 6px;
}

.breadcrumbs li {
    display: block;
    float:left;
    text-align:center;
    width: 25%;
    position: relative;
    padding-top: 15px;
}

.breadcrumbs li:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: blue;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -5px;
}

<ul class="breadcrumbs">
  <li>Home</li>
  <li>Course</li>
  <li>Subject</li>
  <li class="active">English</li>
</ul>