Как выровнять один элемент «формы» внутри «li», с другим «li»?

Question

Я создал JSFiddle, чтобы проиллюстрировать мою ошибку.

Я просто хочу, чтобы выровнять все «Ли» элементы в «ул»

<div id="easySearchMenu"> 
    <ul> 
     <li>Categories 
      <ul> 
       <li>Classifieds</li> 
       <li>Business listings</li> 
       <li>Propetries</li> 
      </ul> 
     </li> 
     <li>Advanced Search</li> 
     <li> 
      <form id="searchForm"> 
       <fieldset> 
        <div class="input"> 
         <input type="text" name="s" id="s" value="Enter your search" /> 
        </div> 
        <input type="submit" id="searchSubmit" value="" /> 
       </fieldset> 
      </form> 
     </li> 
     <li>Log in/Register</li> 
    </ul> 
</div> 

Answer 1

изменения кода, как показано ниже

<div id="easySearchMenu"> 
    <ul> 
     <li>Categories 
      <ul> 
       <li>Classifieds</li> 
       <li>Business listings</li> 
       <li>Propetries</li> 
      </ul> 
     </li> 
     <li>Advanced Search</li> 
     <li style="padding: 8px 20px 7px 20px;"> 
      <form> 
       <div class="input"> 
        <input type="text" name="s" id="s" value="Enter your search"> 
       </div> 
       <input type="submit" id="searchSubmit" value=""> 
      </form> 
     </li> 
     <li>Log in/Register</li> 
    </ul> 
</div> 

, наконец изменить CSS, с селектором div.input удалить float:right; пара свойств/стоимости.

Answer 2

Вы используете элементы уровня блока в своей внутренней ul, вызывая ненужные осложнения.

Вы можете изменить свой fieldset на display:inline-block, чтобы выровнять эти поля, хотя это не помогает с разной высотой.