如何使文本和宽度100％与分辨率和输入集中？

Question

输入：中心，宽度和字体灵活。

<div>
        <input value="00" type="text" name="horas" maxlength="2"> <!-- center -->
        <input value=":" type="text" disabled>                    <!-- center -->
        <input value="00" type="text" maxlength="2">              <!-- center -->
        <input value=":" type="text" disabled>                    <!-- center -->
        <input value="00" type="text" maxlength="2">              <!-- center -->
</div>

示例：

| 00:00:00 |

| 00:00:00 |

| 00:00:00 |

谢谢你！

Answer 1

这就是你想要做的事情

JSfiddle Demo

<强> HTML

<div>
    <input value="00" type="text" name="horas" maxlength="2" />
    <span>:</span>
    <input value="00" type="text" maxlength="2" />
    <span>:</span>
    <input value="00" type="text" maxlength="2" />
</div>

<强> CSS

    div {
    width:6em;
    margin:1rem auto;
    text-align: center;
    border-left:2px solid black;
    border-right:2px solid black;
    font-size:36px;
}
input {
    width:1.5em;
    display: inline-block;
    text-align: center;
    border:none;
    outline:none;
    vertical-align: middle;
}