0

こんにちは、水平方向のナビゲーションを備えた django アプリがあります。最近何が起こったのか、Windows マシンから接続してアプリを使用することにしました。これは、私の水平ナビゲーションが以下のように見えるものです。

ここに画像の説明を入力

何らかの理由で、バックアップ データとヘルプが新しい行に移動されます。しかし、これら 2 つのタブを同じ水平ナビゲーション ラインに配置したいと考えています。別の Web ブラウザを使用してみましたが、メニューは同じように見えました。

これが起こった理由の 1 つとして考えられるのは、私の解決策かもしれませんが、よくわかりません。私の Windows マシンの画面解像度は 1440 X 900 ですが、Linux マシンの解像度は 1024 X 768 です。

すべてのタブを同じ行に配置する必要があるのだろうか。それを行うには、いくつかの css を追加する必要があるかもしれません。

base_menu.html

   <ul id="toc">
            <li><a href="{% url mmc.views.return_clients %}"><span>Home</span></a></li>
            <li><a href="{% url mmc.views.quote_step1 %}"><span>Create quote/order</span></a></li>
            <li><a href="{% url mmc.views.search_item %}"><span> Item Search</span></a></li>
            <li><a><span>Service orders</span></a><br/>
            <ul class="subnav">
                    <li><a href="{% url mmc.views.order_list %}"><span>Storage orders</span></a></li>
                    <li><a href="{% url mmc.views.order_list_service 1 %}"><span>Delivery orders</span></a></li>
                    <li><a href="{% url mmc.views.order_list_service 2 %}"><span>Collection orders</span></a></li>
            </ul>
            </li>
            <li><a><span>Collection/Delivery</span></a><br/>
            <ul class="subnav">
                    <li><a href="{% url mmc.views.service_list 1 %}"><span>Delivery list</span></a></li>
                    <li><a href="{% url mmc.views.service_list 2 %}"><span>Collection list</span></a></li>
            </ul>
            </li>
            <li><a href="{% url mmc.views.invoice_list %}"><span>Export for invoicing</span></a></li>
            <li><a href="{% url mmc.views.dbbackup %}"><span>Backup data</span></a></li>
            <li><a href="{% url mmc.views.help_index %}" target="_blank" onclick="return showAddAnotherPopup(this);"><span>Help</span></a></li>
    </ul>

更新: base.css ファイル

ul#toc {
    height: 2em;
    list-style: none;
    margin-left: 200px;
    padding: 0;
    position relative;
}   

ul#toc li{
    background:#ffffff url(../images/tab.png);
    float: left;
    margin: 0 1px 0 0;

}

ul#toc span {
    background: url(../images/tab.png) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}

ul#toc a {
    color: #000000;
    height: 2em;
    float: left;
    text-decoration: none;
    padding-left: 10px;
}
4

2 に答える 2

1

ナビゲーションに width 属性を追加する必要があるようです。これにより、表示サイズが変更されたときにサイズが変更されないようにすることができます。

ul#toc {
    /*width: ###px;*/
    /*adding a width attribute to your div will give the ul a boundary*/
    height: 2em;
    list-style: none;
    margin-left: 200px;
    padding: 0;
    position relative;
}
于 2013-07-10T16:12:49.670 に答える
0

私のWindowsマシンの画面解像度は1440X900ですが、Linuxマシンの解像度は1024x768です。

これが逆になっていないと思いますか？

Windowsの解像度が小さければ、問題はより理にかなっています。

その場合、あなたができることの1つは、ナビゲーションに特定のピクセル幅を設定することです。

次に、解像度がビューポートよりも小さい場合、水平スクロールが表示されますが、ナビゲーションはすべて1行になります。

編集

以下のコメントから、ナビゲーションに特定の幅を設定するにはどうすればよいですか？

ul#tocがnavコンテナの場合、

ul#toc {
    height: 2em;
    list-style: none;
    margin-left: 200px;
    padding: 0;
    position relative;
    width:1440px; //OR SOME OTHER #
}
于 2011-09-27T11:52:30.360 に答える