Question

我在li里面有p元素的问题。它应该在同一行中看到，ul元素应该溢出水平滚动条。但它不起作用。

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

链接到fiddle。请不要使用固定宽度尺寸。因为，文字可以是不同的大小。谢谢您的回答。

Answer 1

添加此设置以防止换行：

li p {
    white-space: nowrap;
}

jsFiddle Demo

CSS：里面的p元素转到新行

1 个答案: