1

http://jsfiddle.net/K4ZGg/ 更新これは正しい jsfiddle リンクです

私の JsFiddle には、これまでのところ私の試みがあります。メニューの項目をメニューの高さに合わせて、リスト項目の中央に配置したいと思っています。

助けてください。（質問の単純さをお詫び申し上げます。しばらくの間、これを理解しようとしてきたことを約束します）

HTML

<header id="navmenu">
    <ul>
        <li>
            <label>Welcome <span id="firstName"></span></label>
        </li>
        <li>
            <a href="#" onclick="return false;">Option One</a>
        </li>
        <li>
            <a href="#" onclick="return false;">Option Two</a>
        </li>
    </ul>
</header>

ベア CSS (フルは JsFiddle リンクにあります)

#navmenu {
    background-color: rgba(250, 250, 210, 1);
    text-align:right;
    height:42px;
    width:100%
}
#navmenu ul {
    height:42px;
}
#navmenu ul li {
    display:inline;
    padding: 0 8px;
    height: 100%;
    border-right: solid 1px black;
}
#navmenu ul li:last-child {
    border-right: 0;
}
4

2 に答える 2

5

行の高さは行く方法です。リスト項目の行の高さをコンテナーと同じ高さに設定するだけです (この場合は ul)

#navmenu ul li {
display:inline;
padding: 0 8px;
height: 100%;
border-right: solid 1px black;
    line-height: 42px;
}

黒い線を ul の境界に合わせたい場合は、リスト項目をインライン ブロックに設定するだけです。

#navmenu ul li {
display:inline-block;
padding: 0 8px;
height: 100%;
border-right: solid 1px black;
    line-height: 42px;
}

ここでフィドル: http://jsfiddle.net/gleezer/K4ZGg/1/

編集：OPが高さ全体でリンクを選択できるように要求したため：

#navmenu ul li a{
   line-height: 42px;
   display: inline-block;
}

アンカー全体がリスト項目の高さ全体にまたがるようにする必要があります。上記と同じトリック: 行の高さを全高に広げます。

ここでフィドル: http://jsfiddle.net/gleezer/K4ZGg/5/

于 2013-06-27T00:34:09.100 に答える
0

これを試してください：

#navmenu {
    background-color: rgba(250, 250, 210, 1);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.8);
    box-shadow: 0 0 3px rgba(0,0,0,0.8);
    text-align:right;
    height:42px;
    width:100%
}
#navmenu ul {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    padding: 0 12px;
    height:42px;
  float: right;
}
#navmenu ul li {
    **display:block;
    float: left;
    line-height: 42px;**

}
#navmenu ul li:first-child {
    **padding-right: 8px;**
}
#navmenu a {
    text-decoration:none;
  **border-left: solid 1px black;
  padding: 0 8px;**
}

デモをご覧ください。

于 2013-06-27T01:12:49.713 に答える