BR標籤不工作

Question

如何在多維數據集的鏈接，分成兩個線 我試圖讓這兩個詞之間的BR標籤在立方體

http://jsfiddle.net/VXXPC/23/embedded/result/

<div style="height: 65px;"> 
      <div style="padding-bottom:14px;"> 
      <nav style="margin-left: 362px;"> 
       <a class="soCube" href="/html/">Customer Profile</a> 
       <a class="poCube" href="/css/">SO</a> 
       <a class="bomCube" href="/js/">Quote</a> 
       <a class="rmaCube" href="/jquery/">Invoices</a> 
       <a class="onOrderCube" href="/html/">Credit Memo</a> 
       <a class="onHandCube" href="/html/">RMA</a> 
       <a class="allocatedCube" href="/html/">Open AR</a> 
       <a class="shippedCube" href="/html/">Payment</a> 
      </nav> 
      </div> 
     </div> 

Answer 1

如何改變它並將其放入列表中？

<div class="container"> 
    <div style="height: 100px;"> 
     <div style="padding-bottom:14px;"> 
      <nav style="margin-left: 10px;"> 
       <ul> 
        <li class="soCube"><a href="/html/">Customer<br>Profile</a></li> 
        <li class="poCube"><a href="/css/">SO</a></li> 
        <li class="bomCube"><a href="/js/">Quote</a></li> 
        <li class="rmaCube"><a href="/jquery/">Invoices</a></li> 
        <li class="onOrderCube"><a href="/html/">Credit<br>Memo</a></li> 
        <li class="onHandCube"><a href="/html/">RMA</a></li> 
        <li class="allocatedCube"><a href="/html/">Open<br>AR</a></li> 
        <li class="shippedCube"><a href="/html/">Payment</a></li> 
       </ul> 
      </nav> 
     </div> 
    </div> 
</div> 

然後造型：

nav li{ 
display: table; 
float:left; 
margin-right: 10px; 
height: 60px; 
} 

nav a{ 
    display: table-cell; 
    vertical-align: middle; 
    padding: 10px; 
    font-family: verdana; 
    font-size: 11px; 
    color: white;  
} 
nav { 
    padding-bottom: 5px; 
    padding-top: 5px; 

} 
.soCube{ 
    color: white; 
    background-color: #999933; 
} 
.poCube{ 
    color: white; 
    background-color: #669900; 
} 
.bomCube{ 
    color: white; 
    background-color: #cc3300; 
} 
.rmaCube{ 
    color: white; 
    background-color: #e8690b; 
} 

.onOrderCube{ 
    color: white; 
    background-color: #663366; 
} 
.onHandCube{ 
    color:white; 
    background-color: #669900; 
} 
.allocatedCube{ 
    color:white; 
    background-color: #cc3300; 
} 
.shippedCube{ 
    color:white; 
    background-color: #009999; 
} 
.costCube{ 
    color:white; 
    background-color: #3366cc; 
} 
.priceCube{ 
    color: white; 
    background-color: #ff6600; 
} 

我修改了一些你的尺寸，這樣我就可以更好地調整它，但你可以得到的想法。

這裏是小提琴JsFiddle

Answer 2

建議1：

1）你將不得不您的鏈接的顯示屬性更改爲inline-block

nav a { 
    display: inline-block; 
    *zoom: 1; /* if IE 6, 7 support required */ 
    *display: inline; /* if IE 6, 7 support required */ 
    color: gray; 
    font-family: verdana; 
    font-size: 11px; 
    padding: 5px; 
} 

2）刪除您的來自周圍父母的內聯風格。

<div class="container"> 
    <div style="height: 65px;"> 

I would suggest to move all CSS into an external file using classes。

3），然後再次使用br - 標籤。

建議2：

1）包裹在div容器的錨。

<style> 
    cube-wrapper-outer { 
     margin-left: 362px; 
    } 
    cube-wrapper-inner { 
     padding-bottom: 14px; /* instead of heaving the padding on a parent container */ 
    } 

<nav class="cube-wrapper-outer"> 
    <div class="cube-wrapper-inner"> 
     <a class="soCube" href="/html/">Customer Profile</a> 
     <a class="poCube" href="/css/">SO</a> 
     <a class="bomCube" href="/js/">Quote</a> 
     <a class="rmaCube" href="/jquery/">Invoices</a> 
    </div> 
    <div class="cube-wrapper-inner"> 
     <a class="onOrderCube" href="/html/">Credit Memo</a> 
     <a class="onHandCube" href="/html/">RMA</a> 
     <a class="allocatedCube" href="/html/">Open AR</a> 
     <a class="shippedCube" href="/html/">Payment</a> 
    </div> 
</nav> 

2）再次，從周圍的父母中刪除你的內聯風格。

<div class="container"> 
    <div style="height: 65px;"> 

。希望解決您的問題:)