title: CSS: p element inside li goes to new line
body: <p>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.</p>
  
  <p>HTML as follows:</p>
  
  <pre><code>   &lt;div id="tests" class="container"&gt;
      &lt;form&gt;
          &lt;input type="text" id='search-textbox' placeholder='Action name'/&gt;
          &lt;input type="button" id='search-button'value="Search"/&gt;
      &lt;/form&gt;
      &lt;div class="clip"&gt;
          &lt;ul id="ul-tests"&gt;
              &lt;li&gt;
                  &lt;p&gt;Action-001&lt;/p&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;p&gt;Action-001-001&lt;/p&gt;
                          &lt;ul&gt;
                              &lt;li&gt;
                                  &lt;p&gt;Action-001-001-001&lt;/p&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;p&gt;Hello-Action-001-001-001-001&lt;/p&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;p&gt;Hello-Action-001-001-001-002&lt;/p&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;p&gt;Hello-Action-001-001-001-003&lt;/p&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;p&gt;Hello-Action-001-001-001-004&lt;/p&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;p&gt;Hello-Action-001-001-001-005&lt;/p&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;p&gt;Hello-Action-001-001-001-006&lt;/p&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;p&gt;Hello-Action-001-001-001-007&lt;/p&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;p&gt;Hello-Action-001-001-001-008&lt;/p&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;p&gt;Hello-Action-001-001-001-009&lt;/p&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;p&gt;Hello-Action-001-001-001-010&lt;/p&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;p&gt;bell-Action-001-001-002&lt;/p&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;p&gt;bell-Action-001-001-003&lt;/p&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;p&gt;bell-Action-001-001-004&lt;/p&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;p&gt;bell-Action-001-001-005&lt;/p&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;p&gt;bell-Action-001-001-006&lt;/p&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;p&gt;bell-Action-001-001-007&lt;/p&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;p&gt;bell-Action-001-001-008&lt;/p&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;p&gt;bell-Action-001-001-009&lt;/p&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;p&gt;bell-Action-001-001-010&lt;/p&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Action-001-002&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Action-001-003&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Action-001-004&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Action-001-005&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Action-001-006&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Action-001-007&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Action-001-008&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Action-001-009&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Action-001-010&lt;/p&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;p&gt;Action-002&lt;/p&gt;&lt;/li&gt;
              &lt;li&gt;&lt;p&gt;Action-003&lt;/p&gt;&lt;/li&gt;
              &lt;li&gt;&lt;p&gt;Action-004&lt;/p&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS as follows:</p>
  
  <pre><code>    *
      {
          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&gt;form
      {
          top:4px;
          left:4px;
          right:4px;
  
          height:32px;
          min-height:32px;
  
          overflow: hidden;
  
          display:block;
          position: absolute;
      }
  
      div#tests.container&gt;form&gt;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&gt;form&gt;input#search-textbox::-webkit-input-placeholder
      {
          padding-left:10px;
          color: #9c9c9c;
          font-style: italic;
      }
  
      div#tests.container&gt;form&gt;input#search-textbox:-moz-placeholder
      {
          color: #9c9c9c;
          font-style: italic;
      }
  
      div#tests.container&gt;form&gt;input#search-textbox:-ms-placeholder
      {
          color: #9c9c9c;
          font-style: italic;
      }
  
      div#tests.container&gt;form&gt;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;
      }
  </code></pre>
  
  <p>Link to the <a href="http://jsfiddle.net/CtYyP/" rel="noreferrer">fiddle</a>.
  Please does not suggest to use fixed width size. Because, text can be different size. Thank you for your answers. </p>