6

次のようなメニューを作成したいと考えています。

ホーム | フー | バー | について | コンタクト

どうすればこれを行うことができますか？

これが私が試したことです：

<lift:Menu.builder ul:class="menu" li_item:class="current" />

と

ul.menu li {
   display: inline;
   list-style-type: none;
   text-transform: uppercase;
   border-right: 1px solid white;
   padding-right: 5px;
}

li.current span {
   background: white;
   color: black; 
   padding: 5px 5px 3px 5px;
   font-size: 11px;
}

li.current a, a:visited, a:link {
   color: white; 
   padding: 5px 5px 3px 5px;
   font-size: 11px;
}

これは近いですが、完全に正しくはありません。また、最後に余分な行ができます。行をテキストと同じ高さにしたい。

http://lh5.ggpht.com/_5DxlOp9F12k/S2aFQHfupzI/AAAAAAAAJiY/Ds0IpEyu78I/s800/menu.png

4

4 に答える 4

4

これを行うためのよりクリーンな方法があるかもしれません。サイトマップでURLを宣言すると、テンプレートの通常のリンクとしてほとんど使用できます。あなたはそれらを純粋なhtmlとして書くでしょう。

Boot.scalaの場合：

val menus = List(
  Menu(Loc("home", List("index"), "Home")),
  Menu(Loc("foo", List("foo"), "Foo")),
  Menu(Loc("bar", List("bar"), "Bar")),
  Menu(Loc("about", List("about"), "About")),
  Menu(Loc("contact", List("contact"), "Contact"))
)
LiftRules.setSiteMap(SiteMap(menus: _*))

テンプレートでは、たとえばindex.html：

<div id="menu">
  <a href="/index">Home</a> |
  <a href="/foo">Foo</a> |
  <a href="/bar">Bar</a> |
  <a href="/about">About</a> |
  <a href="/contact">Contact</a>
</div>

または、Debilskiが言ったように、各メニュー項目を名前で呼び出すこともできます。それはもっとLift-iescでしょう。

<div id="menu">
  <lift:Menu.item name="home"/>
  <lift:Menu.item name="foo"/>
  <lift:Menu.item name="bar"/>
  <lift:Menu.item name="about"/>
  <lift:Menu.item name="contact"/>
</div>

次に、外部スタイルシートファイルまたはページ内に任意のスタイルを追加できます。

于 2010-08-11T16:30:17.817 に答える
3

最後の行を削除するには、：last-child疑似クラスを使用できます。

ul.menu li：last-child {
  境界線：なし;
}
于 2010-04-06T11:48:10.627 に答える
1

<li>要素にインラインブロック を持たせることをお勧めしますdisplay。

ul.menu li {
   display: inline-block;
   *display: inline; zoom: 1; /* inline-block under IE */
   vertical-align: middle;
}

このように、それらはブロック要素のように動作し、リンクと同期する可能性があります。line-heightまた、行の高さがテキストをより正確に垂直方向に中央揃えするため、垂直方向のパディングを追加する代わりに、プロパティを試してみることができます。

于 2010-03-18T16:30:49.147 に答える