html - 文本行流到第二行(html div 和元素符号)？

Question

两个要点不必要地流到第二行。

“2 个用户终身免费”和“最多 5 个数据库，包括一个演示数据库”都进入了第二行，这看起来很难看，意味着最后的要点几乎位于“显示功能”按钮上。

您可以访问该站点:http://www.workbooks.com/workbooks-instant-access

参见:

代码如下:

<div id="pricing-list">
    <div class="pricing-item" id="free-item">
        <div class="h-line at-top">
            &nbsp;</div>
        <div class="left-part">
            <h3>
                Free Edition</h3>
            <p class="desc-1">Get started right away with our free edition.</p>
            <p class="desc-2">Free for up to 2 users</p>
        </div>
        <div class="right-part">
            <div class="l-col">
                <ul class="features-list">
                    <li>
                        Community Support Only</li>
                    <li>
                        Sales, Marketing and Support</li>
                    <li>
                        Quotes, Orders and Invoices</li>
                </ul>
                <p><a class="do-btn" href="/sign-up/workbooks-free-edition">Sign up to the FREE Edition</a></p>
            </div>
            <div class="r-col">
                <ul class="features-list">
                    <li>
                        1 Database Only</li>
                    <li>
                        2 Users Free for Life</li>
                    <li>
                        Storage Limit</li>
                </ul>
                <br />
                <br />
                <a class="do-btn" href="/pricing">Show me the features</a></div>
        </div>
        <div class="h-line at-bottom">
            &nbsp;</div>
    </div>
    <div class="pricing-item" id="trial-item">
        <div class="h-line at-top">
            &nbsp;</div>
        <div class="left-part">
            <h3>
                30 Day Free Trial</h3>
            <p class="desc-1">Access all features for 30 days. Unlimited users.</p>
            <p class="desc-2">Full Feature Trial</p>
        </div>
        <div class="right-part">
            <div class="l-col">
                <ul class="features-list">
                    <li>
                        Sales, Marketing and Support</li>
                    <li>
                        Quotes, Orders and Invoices</li>
                    <li>
                        Multi Currency</li>
                </ul>
                <a class="do-btn" href="/sign-up/workbooks-trial-edition">Trial the Business Edition</a></div>
            <div class="r-col">
                <ul class="features-list">
                    <li>
                        Telephone &amp; Community Support</li>
                    <li>
                        Up to 5 databases, including a Demo Database</li>
                    <li>
                        Advanced Security</li>
                </ul>
                <br />
                <a class="do-btn" href="/pricing">Show me the features</a></div>
        </div>
        <div class="h-line at-bottom">
            &nbsp;</div>
    </div>
    <div class="pricing-item" id="instant-item">
        <div class="h-line at-top">
            &nbsp;</div>
        <div class="left-part">
            <h3>
                Instant Access</h3>
            <p class="desc-1">Jump straight into our demo system</p>
        </div>
        <div class="right-part">
            <div class="instant-access-bg">
                <div class="l-col">
                    <ul class="features-list">
                        <li>
                            Log straight into a Demo System</li>
                        <li>
                            Get an instant feel for Workbooks</li>
                    </ul>
                    <a class="do-btn" href="http://content.workbooks.com/workbooks-instant-access">Access the demo instantly</a></div>
            </div>
        </div>
    </div>
    <div class="pricing-item" id="adv-item">
        <div class="h-line at-top">
            &nbsp;</div>
        <div class="left-part">
            <h3>
                Speak to an advisor</h3>
            <p class="desc-1">Speak right now to someone who can help</p>
        </div>
        <div class="right-part">
            <div class="speak-to-an-advisor-bg">
                <div class="l-col">
                    <ul class="features-list">
                        <li>
                            Ask any questions you have</li>
                        <li>
                            Find out which edition is right for you</li>
                    </ul>
                    <a class="do-btn" href="https://server.iad.liveperson.net/hc/31900811/?cmd=file&amp;file=visitorWantsToChat&amp;site=31900811&amp;byhref=1" onclick="javascript:window.open('https://server.iad.liveperson.net/hc/31900811/?cmd=file&amp;file=visitorWantsToChat&amp;site=31900811&amp;byhref=1','new_win','width=484,height=361');return false;" target="_blank">Start Online Chat</a></div>
            </div>
        </div>
        <div class="h-line at-bottom">
            &nbsp;</div>
    </div>
</div>
<p>&nbsp;</p>

有人知道这是怎么回事吗？

Answer 1

您可以通过将 white-space: nowrap; 添加到 .pricing-item .features-list li css 类来解决此问题。