1

在此处输入图像描述如何使多维数据集中的链接分成两行我尝试在多维数据集中的两个单词之间给出 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>
4

2 回答 2

4

稍微改变一下并将其放入列表中怎么样？

<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

于 2013-01-23T01:32:43.560 回答
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;">

我建议使用 classes 将所有 CSS 移动到外部文件中。

3）然后br再次使用您的 -tag 。

建议二：

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;">

希望能解决你的问题:)

于 2013-01-23T02:16:51.217 回答