LI for Form - 輸入文本框的對齊

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

參考此鏈接 ，很容易上課就可以開始設計。