我尝试使用这个 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;
}
最佳答案
试试这个
#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;
关于javascript - 为什么 css break(不占用 li 的高度)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31624604/