我希望能够完成一些缩小的面包屑的东西(希望没有js ...但我可以满足于香草js)
我有一个未知数量的物品,需要像面包屑一样(不可导航)
活动项总是可读的,如果有足够的项目,它们都是可读的(即非活动选项卡缩放它们的宽度以适应可用宽度,在确保活动项完全可见后离开)我已经按照教程进行了操作非常接近(但我无法弄清楚如何缩放它)
/* BREADCRUMBS.CSS */
ul.breadcrumb {
list-style: none;
width: 460px;
height: 40px;
border-radius: 2px;
border: solid 1px #d2d2d2;
}
ul.breadcrumb li {
float: left;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
font: 14px Roboto, "Helvetica Neue", sans-serif;
}
ul.breadcrumb li:first-of-type {
border-left: 1px solid #d2d2d2;
}
ul.breadcrumb li span.inner {
overflow: hidden;
direction: rtl;
white-space: nowrap;
/* keeps everything on one line */
width: 100%;
}
ul.breadcrumb li {
color: #4a4a4a;
font-weight: bold;
text-decoration: none;
padding: 10px 0 10px 40px;
background: #F5F5F5;
position: relative;
display: block;
min-width: 10px;
float: left;
padding-right: 1em;
}
ul.breadcrumb li.active {
color: #396d9a;
background: white;
min-width: 150px;
}
ul.breadcrumb li::before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 21px solid transparent;
border-left: 12px solid #d2d2d2;
position: absolute;
top: 50%;
margin-top: -22px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
ul.breadcrumb li::after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 22px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 21px solid transparent;
border-left: 12px solid #F5F5F5;
position: absolute;
top: 50%;
margin-top: -22px;
left: 100%;
z-index: 2;
}
ul.breadcrumb li.active::after {
border-left: 12px solid white;
}
ul.breadcrumb li:last-child {
border-right: 1px solid #d2d2d2;
padding-right: 1em;
}
ul.breadcrumb li:last-child::before {
display: none;
border: none;
}
ul.breadcrumb li:last-child::after {
display: none;
border: none;
}
<!-- breadcrumbs.html !-->
Example 1. Works fine with a couple of items
<ul class="breadcrumb ng-star-inserted">
<li class="active ng-star-inserted"><span class="inner">CLEAN DEVICE</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
</ul>
<hr/>
How Do i make inactive items shrink (and hide text as needed) so they all fit on the same row? while keeping the active tabs text visible
<ul class="breadcrumb ng-star-inserted">
<li class="active ng-star-inserted"><span class="inner">CLEAN DEVICE</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
</ul>
(顺便说一下,我没有嫁给这里的任何概念(即如果这对于ul以外的元素更容易))... ...基本上我只是在css很糟糕:(
您可以尝试使用flexbox:
display: flex
添加到ul
(可选地覆盖其默认填充),flex: 0 0 auto
添加到第一个和最后一个li
(这是一个简写,表示flex项不应该增长或缩小但只采用其自动宽度),min-width
的li
。见下面的演示:
/* BREADCRUMBS.CSS */
ul.breadcrumb {
list-style: none;
width: 460px;
height: 40px;
border-radius: 2px;
border: solid 1px #d2d2d2;
display: flex; /* added */
padding: 0; /* added */
}
ul.breadcrumb li {
float: left;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
font: 14px Roboto, "Helvetica Neue", sans-serif;
}
ul.breadcrumb li:first-of-type {
border-left: 1px solid #d2d2d2;
}
ul.breadcrumb li span.inner {
overflow: hidden;
direction: rtl;
white-space: nowrap;
/* keeps everything on one line */
width: 100%;
}
ul.breadcrumb li {
color: #4a4a4a;
font-weight: bold;
text-decoration: none;
padding: 10px 0 10px 40px;
background: #F5F5F5;
position: relative;
display: block;
min-width: 10px;
float: left;
padding-right: 1em;
}
ul.breadcrumb li.active {
color: #396d9a;
background: white;
/*min-width: 150px;*/
flex: 0 0 auto; /* added */
}
ul.breadcrumb li::before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 21px solid transparent;
border-left: 12px solid #d2d2d2;
position: absolute;
top: 50%;
margin-top: -22px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
ul.breadcrumb li::after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 22px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 21px solid transparent;
border-left: 12px solid #F5F5F5;
position: absolute;
top: 50%;
margin-top: -22px;
left: 100%;
z-index: 2;
}
ul.breadcrumb li.active::after {
border-left: 12px solid white;
}
ul.breadcrumb li:last-child {
border-right: 1px solid #d2d2d2;
padding-right: 1em;
flex: 0 0 auto; /* added */
}
ul.breadcrumb li:last-child::before {
display: none;
border: none;
}
ul.breadcrumb li:last-child::after {
display: none;
border: none;
}
<!-- breadcrumbs.html !-->
Example 1. Works fine with a couple of items
<ul class="breadcrumb ng-star-inserted">
<li class="active ng-star-inserted"><span class="inner">CLEAN DEVICE</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
</ul>
<hr/>
How Do i make inactive items shrink (and hide text as needed) so they all fit on the same row? while keeping the active tabs text visible
<ul class="breadcrumb ng-star-inserted">
<li class="active ng-star-inserted"><span class="inner">CLEAN DEVICE</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
</ul>
一种方法是使用flex-box来根据需要实现面包屑元素的自适应大小调整。
此外,为了实现淡出效果,您可以在linear-gradient
列表项的内部跨度上引入一个伪元素,该元素具有从透明到背景灰色的pending
渐变。
下面的CSS调整应该达到你的要求:
/* Use flex box to auto size width of breadcrumb elements */
ul.breadcrumb {
display:flex;
flex-direction:row;
}
/* Update styling of inner span to position with absolute so
that left and right extents can be set */
ul.breadcrumb li.pending span.inner {
position:absolute;
width:unset;
left:1.5rem;
right:0;
direction:ltr;
}
/* Create pseudo element on inner span which overlays graidient
to achieve fade-out effect */
ul.breadcrumb li.pending span::after {
content: '';
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 100%;
background: linear-gradient(90deg, transparent,#F5F5F5);
}
/* BREADCRUMBS.CSS */
ul.breadcrumb {
list-style: none;
width: 460px;
height: 40px;
border-radius: 2px;
border: solid 1px #d2d2d2;
}
ul.breadcrumb li {
float: left;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
font: 14px Roboto, "Helvetica Neue", sans-serif;
}
ul.breadcrumb li:first-of-type {
border-left: 1px solid #d2d2d2;
}
ul.breadcrumb li span.inner {
overflow: hidden;
direction: rtl;
white-space: nowrap;
/* keeps everything on one line */
width: 100%;
}
ul.breadcrumb li {
color: #4a4a4a;
font-weight: bold;
text-decoration: none;
padding: 10px 0 10px 40px;
background: #F5F5F5;
position: relative;
display: block;
min-width: 10px;
float: left;
padding-right: 1em;
}
ul.breadcrumb li.active {
color: #396d9a;
background: white;
min-width: 150px;
}
ul.breadcrumb li::before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 21px solid transparent;
border-left: 12px solid #d2d2d2;
position: absolute;
top: 50%;
margin-top: -22px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
ul.breadcrumb li::after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 22px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 21px solid transparent;
border-left: 12px solid #F5F5F5;
position: absolute;
top: 50%;
margin-top: -22px;
left: 100%;
z-index: 2;
}
ul.breadcrumb li.active::after {
border-left: 12px solid white;
}
ul.breadcrumb li:last-child {
border-right: 1px solid #d2d2d2;
padding-right: 1em;
}
ul.breadcrumb li:last-child::before {
display: none;
border: none;
}
ul.breadcrumb li:last-child::after {
display: none;
border: none;
}
<!-- breadcrumbs.html !-->
Example 1. Works fine with a couple of items
<ul class="breadcrumb ng-star-inserted">
<li class="active ng-star-inserted"><span class="inner">CLEAN DEVICE</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
</ul>
<hr/>
How Do i make inactive items shrink (and hide text as needed) so they all fit on the same row? while keeping the active tabs text visible
<ul class="breadcrumb ng-star-inserted">
<li class="active ng-star-inserted"><span class="inner">CLEAN DEVICE</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
<li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
</ul>