0

您好，我有一个具有水平导航的 django 应用程序。最近发生了什么，我决定从我的 Windows 机器连接以使用我的应用程序。这就是我的水平导航如下所示。

在此处输入图像描述

出于某种原因，备份数据和帮助被移到了新行。但我希望这两个选项卡位于同一水平导航线中。我尝试使用不同的网络浏览器，但菜单看起来还是一样。

我能想到为什么会发生这种情况的一件事可能是我的决心，但我不确定。我的 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

在我看来，您可能需要在导航中添加宽度属性。当显示尺寸发生变化时，这应该有助于防止它调整大小。

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 机器的屏幕分辨率为 1440 x 900，而我的 linux 机器的分辨率为 1024 x 768。

你确定这不是颠倒的？

如果您的 Windows 分辨率较小，您的问题会更有意义。

如果是这种情况，您可以做的一件事是为导航设置特定的像素宽度。

然后，如果分辨率小于视口，您将有一个水平滚动，但导航都将是一行。

编辑

从下面的评论中，我将如何在我的导航上设置特定的宽度？

如果ul#toc是导航容器，那么

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 回答