Горизонтальная навигация не отображается в горизонтальной линии на другом компьютере

Question

Здравствуйте, у меня есть приложение 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;
}

Answer 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;
}  

Answer 2

У моего компьютера с Windows разрешение экрана 1440 X 900, а у моего компьютера с Linux - 1024 x 768.

Вы уверены, что это не перевернуто?

Ваша проблема имела бы больше смысла, если бы разрешение ваших окон было меньше.

---

Если это так, то одну вещь, которую вы можете сделать, это установить конкретную ширину пикселя для навигации.

Тогда, если разрешение меньше, чем у окна просмотра, у вас будет горизонтальная прокрутка, но навигация будет одной строкой.

РЕДАКТИРОВАТЬ

Из комментария ниже Как мне настроить конкретную ширину на моем навигационном устройстве?

Если ul#toc является контейнером навигации, тогда

ul#toc {
    height: 2em;
    list-style: none;
    margin-left: 200px;
    padding: 0;
    position relative;
    width:1440px; //OR SOME OTHER #
}