CSS: p element inside li goes to new line - html

Question

I have problem with p element inside li. It shoud be seen in same line and ul element should overflow with horizontal scroll bar. However it does not work.
HTML as follows:
<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 as follows:
*
{
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;
}
Link to the fiddle.
Please does not suggest to use fixed width size. Because, text can be different size. Thank you for your answers.

Answer 1

Add this setting to prevent line wrapping:
li p {
white-space: nowrap;
}
jsFiddle Demo