李的形式 - 輸入文本框

Question

我該如何調整這個代碼陣營： CSS：

input { 
border: none; 
} 

input.name { 
color: #f39200; 
background: url('../images/name.png') no-repeat left top; 
width: 368px; 
height: 48px; 
padding-top: 1px; 

padding-left: 100px; 
font-size: 24px; 
} 
input.company { 
    vertical-align: middle; 
color: #f39200; 
background: url('../images/company.png') no-repeat left top; 
width: 368px; 
height: 48px; 
padding-top: 0px; 

padding-left: 140px; 
font-size: 24px; 
} 

HTML：

<form id="contact-form" action="contact.php" method="post" style="list-style-type: none; width: 400px;"> 
    <input type="hidden" name="redirect" value="/sent" /> 
    <ul> 
     <li> 
      <input type="text" name="name" class="name" value="" />  
     </li> 

     <li> 
      <input type="text" name="company" class="company" value="" /> 
     </li> 
    </ul> 
</form> 

我想彼此相鄰對齊。因此，這將是這個樣子：

http://dflzqrzibliy5.cloudfront.net/images3/contact-form-generator.png

前兩個是彼此相鄰的其他人不..等。

Answer 1

您可以使用float:left;和display: inline-block;。你應該檢查form的width和input字段的width + padding。

這是JSFiddle。

Answer 2

試試這個： UL李{ 顯示：inline-塊; }

Answer 3

請參考這個link，很簡單的教訓開始設計。