divを分割してテキストを使用して分割します

Question

私はサイトで作業しています。メニューもあります。 しかし、私は画面上に正しい方法で情報を入力するのに問題があります。

私には幅970pxのナビゲーションラッパーがあります。そのラッパーで 私が持っている4つの異なるゾーンの

• ナビゲーション
• 言語スイッチャー
• スタイルスイッチャー
• 検索ボックス

私は最後の4つの項目に一定の幅を与え、それをフロートすることができます右の方へ。 私はナビゲーションに固定幅を与えることができます。

しかし、私は問題があります。 ナビゲーションdivにあります。あなたはすべてのメニューの構造を持っています。 次の画面で

<ul id="mainMenu"> 
    <li class="level1"> 
    <ul> 
     ... Subitems ... 
    </ul> 
    <a>Item 1</a> 
    </li> 
    <li class="level1"> 
    <ul> 
     ... Subitems ... 
    </ul> 
    <a>Item2 that is longer</a> 
    </li> 
</ul> 

ようにあなたは私が何を意味するかを参照してください。 最初の4つのアイテムはナビゲーションです。

私は分割する必要があります、すべてのメニュー項目は、 の幅を超えています。 ご覧のとおり、4つに分割されています。各liには境界線があります。 そして、テキストは各liの中央になければなりません。 しかし、私が使用しているテキストによってはどのように分けることができますか？

http://prntscr.com/27j2q

Answer 1

私は、問題を解決しました。

私はパディングプロパティを使用しました。私はメニューに入っているアイテムを知っているから。 通常は変更されません。だから私はこのようにすることができました。 いくつかの動的なものでより良いはずです。 しかし、今でも解決されています。