Question

我尝试使用此link制作一个简单的演示我能够更好地理解这一点这里是demo但是当我整合它我的应用程序时，它就会破坏.Mean显示一半（以切片的形式）。为什么？ CSS不适用于此实际上我的面包屑没有显示在我的演示中。我认为离子css是冲突我的风格css我们可以用离子进行这个演示吗？如何解决这个问题？

这是我的实时应用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;

为什么css打破（不取李的高度）？

1 个答案: