Question

enter image description here 如何使多维数据集中的链接分成两行我试着在立方体中的两个单词之间给出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;">

希望能解决您的问题：）

链接之间的br标记不起作用

2 个答案: