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

Question

我有标题导航菜单，需要宽度120％以单行显示，否则文本将进入下一行

如果我为该特定div导航菜单设置了120％的宽度，则整个页面宽度也会扩展。

我不想增加整页宽度我只需要在一行中显示导航标签菜单“pharma-menu”。

这就是我在Django模板中包含theat菜单的方式：

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

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

至少我应该以两行显示患者智能，而不是只显示一行 我需要定义哪些显示为两行？ 如果我以这种方式继续，页面宽度也会扩大。

Answer 1

也许这会有所帮助：

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