Html 如何扩展一个div元素而不是整个页面的宽度

我有标题导航菜单，它需要在单行中显示120%的宽度，否则文本将进入下一行

如果我为特定的div导航菜单设置了120%的宽度，那么整个页面的宽度也会扩大

我不想增加整个页面的宽度，只需要在一行中显示导航选项卡菜单“医药菜单”

这就是我如何在Django模板中包含AT菜单：

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

{%include“pharma_center/tab2.html”%}

从firebug中删除的扩展HTML:

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

一个非常基本的Superfish菜单示例
//初始化插件
jQuery（函数（）{
jQuery（'ul.sf菜单'）.superfish（）；
});

至少我应该在两行显示中获得患者智能，而不是仅在一行显示中 我必须定义哪些内容才能显示为两行？ 如果我这样做，页面宽度也会扩大。

也许这会有帮助：

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

{%include“pharma_center/tab2.html”%}

一个工作示例和更多代码将非常有用。我们用一行代码做不了什么。