如何包裝LI標記文本的移動版本沒有js/jquery

我正在爲我的網站設置breadcrumb。它具有以下用戶界面。如何包裝LI標記文本的移動版本沒有js/jquery

這裏的「我的帳戶」是單獨的「李」標籤。「/查看我的訂單歷史記錄/訂單號0005073140」處於單獨的「li」標籤。我需要有以下格式

如果我刪除「/訂單＃0005073140」文本，然後「我的帳戶/查看我的訂單歷史記錄」來一行。由於這個問題是針對移動版本的，因此我只需要爲移動版本設置此換行。

如果我刪除DIV標籤的寬度，則將整個文本設置爲一行，如下所示。

它看起來不太好，因爲它觸摸移動的邊緣（使用chrome開發工具來拍照）。

由於這是用於自適應設計，因此我只需要將此僅用於移動版本。我真的很感謝你的幫助。

原始代碼是在這裏

.breadcrumb { 
 
    background-color: transparent; 
 
} 
 

 
.breadcrumb { 
 
    padding: 8px 15px; 
 
    margin-bottom: 20px; 
 
    list-style: none; 
 
    background-color: #f5f5f5; 
 
    border-radius: 4px; 
 
} 
 
.container { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
ul, ol { 
 
    margin-top: 0; 
 
    margin-bottom: 10px; 
 
} 
 
body { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #333; 
 
    background-color: #fff; 
 
}

<div class="container"> 
 
      <ol class="breadcrumb"> 
 
       
 
       <li> 
 
        <a href="/MyAccount/Index">My Account</a> 
 
       </li> 
 
       
 
       <li class="active"> 
 
          <a href="/MyAccount/OrderHistory">View My Order History</a>/Order# 0005073140 
 

 
       </li> 
 

 
      </ol> 
 
     </div>

來源

2017-05-26 ggn979

我不知道你想要的輸出。我不清楚。

你可以放置文本在自己<li>，就像這樣：

.... 

<li class="active"> 
    <a href="/MyAccount/OrderHistory">View My Order History</a> 
</li> 

<li>Order# 0005073140</li>

，然後添加下面的CSS規則來處理它們，象下面這樣：

.breadcrumb li { 
    display: inline-block; 
    white-space: nowrap; 
} 

.breadcrumb li:after { 
    content: '/'; 
}

查看正在運行的演示：

.breadcrumb { 
 
    background-color: transparent; 
 
} 
 

 
.breadcrumb { 
 
    padding: 8px 15px; 
 
    margin-bottom: 20px; 
 
    list-style: none; 
 
    background-color: #f5f5f5; 
 
    border-radius: 4px; 
 
} 
 

 
.container { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
ul, 
 
ol { 
 
    margin-top: 0; 
 
    margin-bottom: 10px; 
 
} 
 

 
.breadcrumb li { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
} 
 

 
.breadcrumb li:after { 
 
    content: '/'; 
 
} 
 

 
body { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #333; 
 
    background-color: #fff; 
 
}

<div class="container"> 
 
    <ol class="breadcrumb"> 
 

 
    <li> 
 
     <a href="/MyAccount/Index">My Account</a> 
 
    </li> 
 

 
    <li class="active"> 
 
     <a href="/MyAccount/OrderHistory">View My Order History</a> 
 
    </li> 
 

 
    <li>Order# 0005073140</li> 
 

 
    </ol> 
 
</div>

來源

2017-05-26 22:01:47 ochi

在單獨的li標籤中添加Order＃可解決此問題。謝謝Ochi。 – ggn979

很高興我能幫忙:) – ochi

如何包裝LI標記文本的移動版本沒有js/jquery

回答

相關問題