输入中心，标签在左上方

Question

我正在做作业，我必须使用 HTML 和 CSS 重新创建一个页面。页面的一侧显示如下：

我需要 div 中间的输入和输入上方左侧的标签。

现在我有这个：

<div id="completarcampos">

                <label id="lbltelefono" for="campotelefono">Numero de telefono:</label></br>
                <input type="text" id="campotelefono"/></br>

                <label id="lblcontraseña" for="campocontraseña">contraseña:</label></br>
                <input type="text" id="campotelefono"/></br></br>

                <a href="http://www.w3schools.com"><img id="ingresar" src="./imagenes/boton.png" alt="ingresar"/></a></br></br>

            </div>

还有这个

input
    {width:200px;}  

completarcampos
    {border: 2px solid #BCBCBC;
    text-align:center;
    background: linear-gradient(#eeeeee, #ffffff);}

看起来像这样：

我怎样才能让标签按原样排列，但在输入的左侧？

Answer 1

确定，在输入和标签周围添加一个 div 容器，然后像这样向左浮动标签：https://jsfiddle.net/DIRTY_SMITH/f4fhn0wn/3/

<div id="completarcampos">
                <div class="container">
                <label id="lbltelefono" for="campotelefono">Numero de telefono:</label></br>
                <input type="text" id="campotelefono"/></br>
                </div>
                <div class="container">
                <label id="lblcontraseña" for="campocontraseña">contraseña:</label></br>
                <input type="text" id="campotelefono"/></br></br>
                </div>

                <a href="http://www.w3schools.com"><img id="ingresar" src="./imagenes/boton.png" alt="ingresar"/></a></br></br>
</div>

输入中心，标签在左上方

input center, label above and to the left

html

css

label

text-align

web