表单的LI - 输入文本框的对齐方式

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;。您应该查看width form和width + padding字段的input。

这是JSFiddle。

Answer 2

试试这个： ul li {   display：inline-block; }

Answer 3

请参阅此link，这是一个非常简单的课程，可以开始设计。