0

テーブルを使用してナビゲーションバーをまとめようとしています:

  • ウェブサイトのさまざまな部分への n 個のリンクがあります
  • 固定サイズのアイコンである「ログアウト」リンクが 1 つあります。

私がやりたいことは次のとおりです。バー全体の使用可能な幅 (事前にわかっている) からアイコンの必要な幅を差し引いた値を、ナビゲーション用の n 個のリンクを含むセル間で均等に分割する必要があります (内部のリンクのサイズは無視しますが、これは問題ではありません)。

現在、私はこの計算を PHP で実行しており、これを達成するために使用しています。ただし、これは XHTML 1.0 Strict 標準に準拠していません。W3C バリデータによると、CSS を使用して列の幅を設定する必要があります。問題は次のとおりです。これを行う方法がわかりません。また、それが可能かどうかもわかりません。おそらく、この問題は、これにテーブルを使用するべきではないというヒントですが、その時点では他に考えがありません。

XHTML Strict および CSS に準拠した方法で、テーブルなどを使用して効果を得るにはどうすればよいですか?

4

2 に答える 2

2

まず、テーブルをスクラップします。リンクは表形式のデータではありません。

基本

これで始めます：

CSS

ul.navbar
{
    padding-right: 25px;
    list-style:none;
}
ul.navbar li
{
    margin: 0px;
    padding: 0px;
    border: 0px;
    display: block;
    float: left;
}

ul.navbar li.icon
{
    margin-right: -25px;
    width: 25px;
    float:right
}

HTML

<ul class="navbar">
    <li>Home</li>
    <li>FAQ</li>
    <li>Contact</li>

    <li class="icon"></li>
</ul>

等幅

アイコンliは右端にぴったりくっついている必要があります。さて、等間隔を達成する方法はいくつかあります。1 つの方法は、これらのクラスをul用意し、それらを php または jquery を使用して に適用することです。

CSS

ul.navbar.links1 li
{
    width:100%;
}

ul.navbar.links2 li
{
    width:50%;
}

ul.navbar.links3 li
{
    width:33%;
}

ul.navbar.links4 li
{
    width:25%;
}

ul.navbar.links5 li
{
    width:20%;
}

jQuery

$(function()
{
    var n = $("ul.navbar").children().length-1;
    //Get the number of links: -1 because of logout
    $("ul.navbar").addClass("links"+n);
});

または、jQuery または PHP を使用して幅を直接変更することもできます。君による。いずれにせよ、パーセンテージを使用する必要があります。

$(function()
{
    var n = $("ul.navbar").children().length-1;
    //Get the number of links: -1 because of logout
    $("ul.navbar").width((100/n)+"%");
});
于 2009-10-01T07:30:44.363 に答える
1

最も簡単な方法は、リンクを小さなボックス (すべて同じサイズ) に入れることです。CSS は計算を行う方法がないため、ボックスの幅を設定する必要がありますが、CSS を使用することで、これを 1 回行うことができます。DIVボックスに使用します。ボックスのクラスは、ボックスdisplay: inline;がテキスト内の単語のように動作するように指定する必要があります (ブラウザはボックスを 1 行に並べて配置します)。

その後、PHP でボックスごとの幅を計算し、この幅を HTML ページのヘッダーにある小さなインライン CSS で送信します。そうすれば、すべてのボックスが同じ幅になり、すべて同じ行に表示されます。

CSS を使用してナビゲーション バーを作成する方法の例については、今読んでいるページのソース コードを参照してください。

于 2009-10-01T07:29:22.320 に答える