1

ここに画像の説明を入力キューブ内のリンクを 2 行に分割する方法 キューブ内の 2 つの単語の間に 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 :

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 を使用します。

提案 2 :

div1) アンカーをコンテナに包みます。

<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 に答える