CSS：li元素内的p元素换行显示

Question

元素内部的

元素布局有问题。应该在同一行上显示，并且父级

元素应该具备水平滚动条。但实际上它无法正常工作。

HTML 如下：

   <div id="tests" class="container">
    <form>
        <input type="text" id='search-textbox' placeholder='Action name'/>
        <input type="button" id='search-button'value="Search"/>
    </form>
    <div class="clip">
        <ul id="ul-tests">
            <li>
                <p>Action-001</p>
                <ul>
                    <li>
                        <p>Action-001-001</p>
                        <ul>
                            <li>
                                <p>Action-001-001-001</p>
                                <ul>
                                    <li><p>Hello-Action-001-001-001-001</p></li>
                                    <li><p>Hello-Action-001-001-001-002</p></li>
                                    <li><p>Hello-Action-001-001-001-003</p></li>
                                    <li><p>Hello-Action-001-001-001-004</p></li>
                                    <li><p>Hello-Action-001-001-001-005</p></li>
                                    <li><p>Hello-Action-001-001-001-006</p></li>
                                    <li><p>Hello-Action-001-001-001-007</p></li>
                                    <li><p>Hello-Action-001-001-001-008</p></li>
                                    <li><p>Hello-Action-001-001-001-009</p></li>
                                    <li><p>Hello-Action-001-001-001-010</p></li>
                                </ul>
                            </li>
                            <li><p>bell-Action-001-001-002</p></li>
                            <li><p>bell-Action-001-001-003</p></li>
                            <li><p>bell-Action-001-001-004</p></li>
                            <li><p>bell-Action-001-001-005</p></li>
                            <li><p>bell-Action-001-001-006</p></li>
                            <li><p>bell-Action-001-001-007</p></li>
                            <li><p>bell-Action-001-001-008</p></li>
                            <li><p>bell-Action-001-001-009</p></li>
                            <li><p>bell-Action-001-001-010</p></li>
                        </ul>
                    </li>
                    <li><p>Action-001-002</p></li>
                    <li><p>Action-001-003</p></li>
                    <li><p>Action-001-004</p></li>
                    <li><p>Action-001-005</p></li>
                    <li><p>Action-001-006</p></li>
                    <li><p>Action-001-007</p></li>
                    <li><p>Action-001-008</p></li>
                    <li><p>Action-001-009</p></li>
                    <li><p>Action-001-010</p></li>
                </ul>
            </li>
            <li><p>Action-002</p></li>
            <li><p>Action-003</p></li>
            <li><p>Action-004</p></li>
        </ul>
    </div>
</div>



以下是CSS代码：

    *
    {
        margin:0;
        padding:0;
    }
    body, html
    {
        min-width: 1000px;
        min-height:700px;
    }
    div#tests
    {
        top:40px;
        left:40px;
        bottom:20px;

        width:240px;

        display:block;

        position:absolute;
    }
    div#tests.container
    {
        background-color:#ccc;

        border-radius:4px;
    }

    div#tests.container>form
    {
        top:4px;
        left:4px;
        right:4px;

        height:32px;
        min-height:32px;

        overflow: hidden;

        display:block;
        position: absolute;
    }

    div#tests.container>form>input#search-textbox
    {
        top:0;
        left:0;

        height:28px;
        min-height:28px;

        width:150px;
        min-width:150px;

        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;

        border: 1px solid #9c9c9c;
        font: normal 18px 'trebuchet MS', arial, helvetica;

        display: inline-block;
        position: absolute;
    }

    div#tests.container>form>input#search-textbox::-webkit-input-placeholder
    {
        padding-left:10px;
        color: #9c9c9c;
        font-style: italic;
    }

    div#tests.container>form>input#search-textbox:-moz-placeholder
    {
        color: #9c9c9c;
        font-style: italic;
    }

    div#tests.container>form>input#search-textbox:-ms-placeholder
    {
        color: #9c9c9c;
        font-style: italic;
    }

    div#tests.container>form>input#search-button
    {
        top:0;
        right:0;

        height:30px;
        min-height:30px;

        width:78px;
        min-width:78px;

        display:inline-block;
        position:absolute;
    }

    div.clip
    {
        top:38px;
        left:4px;
        right:4px;
        bottom:4px;

        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;

        background-color: #FFF;

        overflow:scroll;

        display:block;
        position: absolute;
    }

    ul#ul-tests
    {
        list-style-type: none;
        margin-left:20px;
    }

    ul#ul-test.hidden-n p
    {
        display:none;
    }

    ul#ul-tests ul
    {
        list-style-type:none;
        margin-left:20px;
    }

链接到演示页面。 请不要建议使用固定宽度大小。因为文本可能有不同的大小。谢谢您的答案。

- Khamidulla

Answer 1

添加此设置以防止换行：

li p {
    white-space: nowrap;
}

jsFiddle Demo

- Itay

---

感谢您的回答。但是我还有一个问题。如果我使用“span”元素而不是“p”元素，它会跳到新行。那么，你也可以帮忙解决这个问题吗？“p”元素的内容等于“Hello-Action-001-001-001-001”。http://jsfiddle.net/CxGuZ/ - Khamidulla

好的。谢谢。我弄明白了。这是因为 span 是内联元素，p 是块级元素。感谢您快速和正确的回答。 - Khamidulla