Question

我创建了一个表单来从用户那里获取卡片信息。

目前看来

card number:[..........] 

CVV code:[....]

Name as appears on card:[..........]

（假装方括号是用户输入的方框，点不在那里。）

我希望它出现

card number: .......................... [........]

cvv: ...................................[........]

简而言之，我希望所有用户输入框都在中心对齐，以使它看起来整洁。

我没有使用CSS（我知道我应该但是对于这种特殊形式有商业原因）

这是我目前的代码

    br></br> Card Number: <input type="number"
            name="cardnumber" required="required" th:field="*{cardNumber}"
            maxlength="16" /> <br></br> Card Expiration: <select
            name='expireMM' id='expireMM' th:field="*{cardExpiry}"
            required="required">
            <option value=''>Month</option>
            <option value='01'>January</option>
            <option value='02'>February</option>
            <option value='03'>March</option>
            <option value='04'>April</option>
            <option value='05'>May</option>
            <option value='06'>June</option>
            <option value='07'>July</option>
            <option value='08'>August</option>
            <option value='09'>September</option>
            <option value='10'>October</option>
            <option value='11'>November</option>
            <option value='12'>December</option>
        </select> <select name='expireYY' id='expireYY' required="required">
            <option value=''>Year</option>
            <option value='10'>2015</option>
            <option value='11'>2016</option>
            <option value='12'>2017</option>
            <option value='13'>2018</option>
            <option value='14'>2019</option>
        </select> <input class="inputCard" type="hidden" name="expiry" id="expiry"
            maxlength="4" /> <br></br> Name (As Shown On Card): <input
            type="text" name="name" style="text-transform: uppercase"
            th:field="*{name}" required="required" /><br></br> CVV Code: <input
            type="number" name="cvvcode" maxlength="16" th:field="*{cardCVV}"
            required="required" /> <br></br>

Answer 1

仅在html中，您可以创建一个包含固定单元格的表格，也可以尝试在其间放置一些制表位：

<tab id=t1>

或

 <tab indent=20>

有意图你可以设置标签的长度

如果你可以使用JavaScript或CSS：有更多更好的选择！

Answer 2

这样的结构可以满足您的需求，不要忘记如果您不能使用外部CSS，也许您可以使用内联样式。无论如何：

<table>
<tr>
    <td>Card Number:</td>
    <td><input type="number" name="cardnumber" required="required" th:field="*{cardNumber}" maxlength="16" /></td>
</tr>
<tr>
    <td>Card Expiration:</td>
    <td>
        <select name='expireMM' id='expireMM' th:field="*{cardExpiry}" required="required">
        <option value=''>Month</option>
            <option value='01'>January</option>
            <option value='02'>February</option>
            <option value='03'>March</option>
            <option value='04'>April</option>
            <option value='05'>May</option>
            <option value='06'>June</option>
            <option value='07'>July</option>
            <option value='08'>August</option>
            <option value='09'>September</option>
            <option value='10'>October</option>
            <option value='11'>November</option>
            <option value='12'>December</option>
        </select>
        <select name='expireYY' id='expireYY' required="required">
            <option value=''>Year</option>
            <option value='10'>2015</option>
            <option value='11'>2016</option>
            <option value='12'>2017</option>
            <option value='13'>2018</option>
            <option value='14'>2019</option>
        </select>
        <input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />
    </td>
</tr>
<tr>
    <td>Name (As Shown On Card):</td>           
    <td><input type="text" name="name" style="text-transform: uppercase" th:field="*{name}" required="required" /></td>
</tr>
<tr>
    <td>CVV Code:</td>          
    <td><input type="number" name="cvvcode" maxlength="16" th:field="*{cardCVV}" required="required" /></td>
</tr>

HTML表单，使输入框为中心

2 个答案: