0

これが私が達成しようとしていることです：

ここに画像の説明を入力

これは、私が持っているスタイリングを示すフィドルdisplay: tableです（各アイテムの幅を固定したくないので、レスポンシブにする必要があるため、使用しています）。

私は近いです、これがスタイリング（簡潔にするためにSASS）とそれがどのように見えるかです：

.nav--main {
    ul {
        display: table;
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        li {
            display: table-cell;
            border: 1px solid #333;
            text-align: center;
            line-height: 1.2;
            vertical-align: top;
            overflow: hidden;
        }
    }
    a {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        height: 200%;
        padding: .5em;
        background-color: rgba(105,158,197,1);
        color: #fff;
        text-decoration: none;
    }
}

aしかし、高さ全体を占めて、中央の垂直方向の中央に留まることはできません。このフィドルはちょっとハックな試みを示していますが、に設定vertical-alignするだけtopです。

ここに画像の説明を入力

私はしたくない：

  • 一定の高さを設定する
  • 背景色を ではliなく に配置しaます: クリック可能な領域が利用可能なすべてのスペースを利用しないのは嫌いです
4

2 に答える 2

0

これを追加：

background: rgba(105,158,197,1);

の中へul

これにより、背景色がリンクと同じに設定されます。

于 2013-09-02T16:15:09.393 に答える