Как увеличить ширину одного элемента div вместо всей страницы

Question

У меня есть меню навигации заголовка, ширина которого должна быть 120% для отображения в одной строке, в противном случае текст попадает в следующую строку

Если я установлю ширину 120% для этого конкретного меню навигации div, вся ширина страницы также увеличится.

Я не хочу увеличивать всю ширину страницы. Мне просто нужно отобразить меню вкладки навигации "pharma-menu" в одной строке.

Вот как я включаю theat меню в шаблон Django:

 <div id="pharma-menu" style="width:120%">
     {% include "pharma_center/tab2.html" %}
 </div> 

расширенный HTML, выпитый из firebug:

  <div style="width:120%;float:left;white-space:nowrap;" id="pharma-menu">



    <title>A very basic Superfish menu example</title>
    <meta content="text/html;charset=utf-8" http-equiv="content-type">
    <link media="screen" href="/site_media/css/superfish.css" type="text/css" rel="stylesheet">
    <script src="/site_media/js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="/site_media/js/hoverIntent.js" type="text/javascript"></script>
    <script src="/site_media/js/superfish.js" type="text/javascript"></script>
    <script type="text/javascript">

    // initialise plugins
    jQuery(function(){
        jQuery('ul.sf-menu').superfish();
    });

    </script>


    <ul class="sf-menu sf-js-enabled sf-shadow">
        <li class="current">
            <a href="/pharma/search/722/" class="sf-with-ul">Patient Intelligence<span class="sf-sub-indicator"> »</span></a>
            <ul style="display: none; visibility: hidden;">
                <li>
                    <a href="/pharma/search/722/">Search Keywords</a>
                </li>

                <li>
                        <a href="/pharma/patient_view/722/">Patient View Point</a>
                </li>

                <li>
                        <a href="/pharma/report/722/?category=patient">Data &amp; Research</a>
                </li>

            </ul>
        </li>
        <li class="">
            <a href="/pharma/sem/722/" class="sf-with-ul">Marketing Intelligence<span class="sf-sub-indicator"> »</span></a>

            <ul style="display: none; visibility: hidden;">
                <li>
                    <a href="/pharma/sem/722/">Search Engine Marketing</a>
                </li>

                <li>
                    <a href="/pharma/ad/722/">Display Advertising</a>
                </li>

                <li>
                    <a href="/pharma/media/722/">Social Media</a>
                </li>

                <li>
                        <a href="/pharma/report/722/?category=market">Data &amp; Research</a>
                </li>

            </ul>
        </li>

        <li class="">
            <a href="/pharma/sales/722/" class="sf-with-ul">Organization Intelligence<span class="sf-sub-indicator"> »</span></a>

            <ul style="display: none; visibility: hidden;">
                <li>
                    <a href="/pharma/sales/722/">Sales</a>
                </li>

                <li>
                    <a href="/pharma/marketing/722/">Marketing</a>
                </li>

                <li>
                    <a href="/pharma/rd/722/">R&amp;D</a>
                </li>
                <li>
                    <a href="/pharma/clinical/722/">Clinical Trials</a>
                </li>

                <li>
                        <a href="/pharma/report/722/?category=organization">Data &amp; Research</a>
                </li>

            </ul>
        </li>
        <li>
            <a href="/pharma/comp/722/">Competitors</a>
        </li>
        <li>
            <a href="/pharma/clinicalIntelligence/722/">Clinical Intelligence</a>
        </li>

    </ul>

По крайней мере, я должен получить информацию о пациенте в двухстрочном дисплее вместо одной. Что я должен определить, чтобы отобразить в две строки? Если я продолжу в том же духе, то ширина страницы также увеличивается.

Answer 1

Может быть, это поможет:

<div id="pharma-menu" style="white-space:nowrap;">
     {% include "pharma_center/tab2.html" %}
</div>