使HTML/CSS Breadcrumb響應

我有一個麪包屑代碼，我希望在我的網站上使用，但它沒有響應。在頁面進入移動視圖時如何使頁面正確縮小的任何想法？現在，隨着分辨率的降低，它會分裂成幾行。使HTML/CSS Breadcrumb響應

感謝您的幫助！

CSS：

.breadcrumb { 
    list-style: none; 
    overflow: hidden; 
    font: 18px Helvetica, Arial, Sans-Serif; 
} 
.breadcrumb li { 
    float: left; 
} 
.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; 
    float: left; 
} 
.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent;   /* Go big on the size, and let overflow hide */ 
    border-bottom: 50px solid transparent; 
    border-left: 30px solid hsla(166, 80%, 36%, 1.0); 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
    left: 100%; 
    z-index: 2; 
} 
.breadcrumb li a:before { 
    content: " "; 
    display: block 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent;   /* Go big on the size, and let overflow hide */ 
    border-bottom: 50px solid transparent; 
    border-left: 30px solid white; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
    margin-left: 1px; 
    left: 100%; 
    z-index: 1; 
} 
.breadcrumb li:first-child a { 
    padding-left: 10px; 
} 
.breadcrumb li:nth-child(2) a  { background:  hsla(166, 80%, 26%, 1.0); } 
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(166, 80%, 26%, 1.0); } 
.breadcrumb li:nth-child(3) a  { background:  hsla(166, 80%, 16%, 1.0); } 
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(166, 80%, 16%, 1.0); } 

.breadcrumb li a:hover { background: hsla(166, 80%, 10%, 1.0); } 
.breadcrumb li a:hover:after { border-left-color: hsla(166, 80%, 10%, 1.0) !important; }

HTML：

<ul class="breadcrumb"> 
<li><a href="#">Home</a></li> 
<li><a href="#">Equipment</a></li> 
<li><a href="#">Category</a></li> 
</ul>

來源

2015-07-18 RYNOmedia

你想要它做什麼而不是分成幾行？ –

使用媒體查詢使其響應。 –

您可以使用媒體查詢。

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

將此粘貼到您當前的代碼下方。這意味着如果視口降到500px以下，它將使用這個新塊。

此外，請確保您已在<head>標記中使用此標記，否則媒體查詢將無法正常運行。 <meta name="viewport" content="width=device-width, initial-scale=1">

來源

2015-07-18 23:35:31

你可以使用表的表芯，但這並不一定是解決你的整個問題：

.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; 
}

使用花車像你是，如果它突破了線條，那意味着你的內容對於這個尺寸來說太大了。使用表/表單元格可以讓他們在一條線上，但他們最終會破壞其細胞，看着可怕，所以你可能要打破這些下來自己：

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

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

我也是猜的很大一部分你的大小問題是在每個麪包屑上設置55px左填充，也可以使用媒體查詢來放棄。

JSFiddle

來源

2015-07-18 23:31:41

使HTML/CSS Breadcrumb響應

回答

相關問題