javascript - 为什么 css break(不占用 li 的高度)？

Question

我尝试使用这个 link 制作一个简单的演示我能够更好地理解这一点这是 demo但是，当我将它集成到我的应用程序时，它会中断。平均显示一半(以切片的形式)。为什么？ CSS不适用实际上，我的面包屑没有显示在我的演示中。我认为 ionic css 与我的样式 css 冲突我们可以用 ionic 制作这个演示吗？如何解决这个问题？

这是我的实时应用 demo url

[![在此处输入图片描述][4]][4]

#my-breadcrumbs ul li {
        list-style:none;
    }

    #my-breadcrumbs {
        margin-top: 44px;
        margin-left: 10px;
    }

    #my-breadcrumbs ul li a {
        display: block;
        float: left;
        height: 25px;
        background: grey;
        text-align: center;
        padding: 15px 20px 0 20px;
        position: relative;
        margin: 0 22.5px 0 0;
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #fff;
    }


    #my-breadcrumbs ul li a:after {
        content: "";
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid grey;
        position: absolute; right: -20px; top: 0;
    }


    #my-breadcrumbs ul li a:before {
        content: "";
        position: absolute;

        margin-top: -15px;
        border-width: 20px 0 20px 20px;
        border-style: solid;
        border-color: grey grey grey transparent;
        left: -20px;
    }


    /* Hide the Before Pseudo Element */
    #my-breadcrumbs ul li:first-child a:before {
        display: none; }

    /* Add Border Radius */
    #my-breadcrumbs ul li:first-child a{
     border-bottom-right-radius: 1px;
    }

Answer 1

试试这个

#my-breadcrumbs ul li a {
  display: block;
  float: left;
  line-height: 13px;  //Add this
  height: 40px;  //Change this
  background: grey;
  text-align: center;
  padding: 15px 20px 0 20px;
  position: relative;
  margin: 0 22.5px 0 0;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-decoration: none;
  color: #fff;
}

如果您想要每个链接之间的边距，请将 margin: 0 22.5px 0 0; 更改为 margin: 0 30px 0 0;