面包屑 V 形 CSS [英] Breadcrumb Chevrons CSS

问题描述

我正在尝试复制位于以下位置的 V 形面包屑代码:http://line25.com/wp-content/uploads/2013/breadcrumbs/demo/demo.html

但似乎无法让它工作.

我的 HTML &CSS 可以在 CodePen 中找到:http://codepen.io/anon/pen/eNWrLj

基本上，发生了什么，我正在尝试将左侧三角形切口添加到面包屑中，但它不起作用.

由于某种原因，切口被扔到了屏幕的左侧，而不是它应该在的地方.

我也不能使用左、右、上、任何一个来定位左侧三角形切口，因为面包屑的内容是随机生成的.可以是 1 个字，也可以是 3 个以上的字.永远不知道.静态定位它只会愚蠢和混乱.

有什么想法吗?

谢谢.

<div class="breadcrumbDiv col-lg-12" id="category_bread_crumb"><ul class="面包屑"><li><a href="categories?catid=">首页</a><li><a href="/Fashion-and-Apparel">时尚与服装</a><li class="active">衬衫</li>

解决方案

一些伪元素工作得很好.

* {边距:0；填充:0；-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；}#stages {边距:50px；}你，李{填充:0；列表样式:无；}李{显示:内联块；位置:相对；保证金:0 .5em ;}一种 {显示:块；高度:2em；行高:2em；文字装饰:无；背景颜色:浅蓝色；填充:0 1em;}李:以前，李:在{之后位置:绝对；内容:"";顶部:0;宽度:0；高度:0；}李:在{之后左:100%；边框:1em 实心透明；边框左颜色:浅蓝色；}李:之前{右:计算(100% - 1em)；边框:1em纯淡蓝色；边框左颜色:透明；}li.current:后{边框左颜色:#00f;}li.current:之前{边框:1em 纯蓝色；边框左颜色:透明；}li:first-of-type:before {边框左颜色:浅蓝色；}li.current:first-of-type:before {边框左颜色:蓝色；}li.current a {背景色:#00f；白颜色;}

<nav role='导航'><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">一些非常长的列表项</a></li><li><a href="#">联系我们</a></li></nav>

Codepen 演示 1

Codepen Demo 2 现在添加了图标

I'm trying to replicate the chevron breadcrumb code located at: http://line25.com/wp-content/uploads/2013/breadcrumbs/demo/demo.html

But can't seem to get it to work.

My HTML & CSS can be found at the CodePen here: http://codepen.io/anon/pen/eNWrLj

Basically, what's going on, is that I'm trying to add the left-side triangular cutout to the breadcrumbs, but it just isn't working.

The cutout is thrown waaaaay to the left-hand side of the screen for some reason, instead of being where it should be.

I also can't use left, right, top, any of that to position the left-side triangular cutout because the content of the breadcrumbs is randomly generated. Could be 1 word, could be 3+ words. Never know. Positioning it statically would just be silly and messy.

Any ideas?

Thank you.

<div class="row">
    <div class="breadcrumbDiv col-lg-12" id="category_bread_crumb">
        <ul class="breadcrumb">
            <li><a href="categories?catid=">Home</a> </li>
            <li><a href="/Fashion-and-Apparel">Fashion and Apparel</a>
            </li>
            <li class="active">Shirts</li>
        </ul>
    </div>
</div>

解决方案

A couple of pseudo-elements works just fine.

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#stages {
  margin:50px;
}

ul, li {
  padding: 0;
  list-style:none;
}

li {
  display: inline-block;
  position: relative;
  margin:0 .5em ;
}

a {
  display: block;
  height:2em;
  line-height:2em;
  text-decoration: none;
  background-color: lightblue;
  padding:0 1em;
}

li:before,
li:after {
  position: absolute;
  content:"";
  top:0;
  width:0;
  height:0;
}

li:after {
  left:100%;
  border: 1em solid transparent;
  border-left-color:lightblue;
}

li:before {
  right:calc(100% - 1em);
  border: 1em solid lightblue;
  border-left-color:transparent;
}

li.current:after {
  border-left-color:#00f;
}

li.current:before {
  border: 1em solid blue;
  border-left-color:transparent;
}

li:first-of-type:before {
    border-left-color:lightblue;
}

li.current:first-of-type:before {
    border-left-color:blue;
}

li.current a {
  background-color: #00f;
  color:white;
}

<div id='stages'>
<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Some Very Very Long List Item</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  
</div>

Codepen Demo 1

Codepen Demo 2 now with added icons

这篇关于面包屑 V 形 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！