使HTML/CSS面包屑具有响应性

我有一个面包屑代码，我希望在我的网站上使用，但它没有响应。当页面进入移动视图时，如何使其适当缩小？现在，随着分辨率的降低，它将自己分成几行

谢谢你的帮助

CSS:

HTML:

您可以使用表格单元格，但这并不一定能解决整个问题：

.breadcrumb { 
    display:table;
    width:100%;
    list-style: none; 
    overflow: hidden; 
    font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li { 
    display:table-cell; 
}
.breadcrumb li a {
    color: white;
    text-decoration: none; 
    padding: 10px 0 10px 55px;
    background: 004aa1;                   /* fallback color */
    background: hsla(166, 80%, 36%, 1.0); 
    position: relative; 
    display: block;
}

像你一样使用浮动，如果它分成几行，那就意味着你的内容太大了。使用table/table cell可能会使它们保持在线，但它们最终可能会破坏它们的单元格并看起来很糟糕，因此您可能希望自己将其分解：

.breadcrumb { display:block; }
.breadcrumb li { display:block; }

@media (min-width:769px){
    .breadcrumb { display:table; }
    .breadcrumb li { display:table-cell; }
}

我也猜你的尺寸问题很大一部分是在你的每个面包屑上设置55px的左边填充，你也可以使用媒体查询来删除它

---

您可以使用媒体查询

@media all and(max-width:500px){
     .breadcrumb{
          font-size: 10px;
     }
     .breadcrumb li a{
          padding:10px 0 10px 30px;
     }
}

将此粘贴到当前代码下面。这意味着，如果视口下降到500px以下，它将使用此新块

另外，请确保您的

标签中有此项，否则媒体查询将无法正常运行。

---

您希望它做什么而不是分成几行？使用媒体查询使其响应。

.breadcrumb { display:block; }
.breadcrumb li { display:block; }

@media (min-width:769px){
    .breadcrumb { display:table; }
    .breadcrumb li { display:table-cell; }
}

@media all and(max-width:500px){
     .breadcrumb{
          font-size: 10px;
     }
     .breadcrumb li a{
          padding:10px 0 10px 30px;
     }
}