李的形式 - 输入文本框

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，很简单的教训开始设计。