Question

See the photo

我该怎么做？

我的HTML代码是

<p> <input type="text" name="Usuari" size="20" maxlength="60"/>
<p>CLAU:</label> <input type="text" name="Clau" size="20" maxlength="20" /></p>
<p><input type="submit" name="submit" value="ACCÉS" /></p>-->

我的CSS代码是

input {
    padding: 5px;
    font-weight: bold;
    font-size: 1em;
    color: #008040;
    background: #FFFFFF;
    border:1px dotted #004080;
}

Answer 1

＆＃13;

p{
    display: table-cell;
    text-align: right;
}
input {
  display: table-cell;
}
div.row{
    display:table-row;
}

＆＃13;

 <div class="row"><p> <input type="text" name="Usuari" size="20" maxlength="60"/></div>
    <div class="row"><p>CLAU:</label> <input type="text" name="Clau" size="20" maxlength="20" /></p></div>
    <p><input type="submit" name="submit" value="ACCÉS" /></p>

＆＃13;

Answer 2

有几种方法可以做到这一点。

您可以使用flex或只使用普通表：

＆＃13;

    <table>
        <tr>
            <td>Name:</td>
            <td><input name="name"></td>
        </tr>
        <tr>
            <td>Sur Name:</td>
            <td><input name="surname"></td>
        </tr>
    </table>

---

    <table>
        <tr>
            <td style="text-align: right;">Name:</td>
            <td><input name="name"></td>
        </tr>
        <tr>
            <td>Sur Name:</td>
            <td><input name="surname"></td>
        </tr>
    </table>

＆＃13;

Answer 3

我会放置＆＃34; USUARI：＆＃34;和＆＃34; CLAU：＆＃34;和class一起进入div并给它们固定大小。

<div>
  <div>
    <div class="hints">
    USUARI:
    </div>
    </div><input type="text" name="Usuari" size="20" maxlength="60"/>
  </div>

  <div>
    <div class="hints">CLAU:
    </div>
    <input type="text" name="Clau" size="20" maxlength="20" />
  </div>
</div>

<input type="submit" name="submit" value="ACCÉS" />


<style>
input {
    padding: 5px;
    font-weight: bold;
    font-size: 1em;
    color: #008040;
    background: #FFFFFF;
    border:1px dotted #004080;
}

.hints
{
  width: 80px;
  float: left;
}
</style>

https://jsfiddle.net/gm5wtw1e/

Answer 4

＆＃13;

label
{
    display: block;
}

label span
{
    display: inline-block;
    text-align: left;
    width: 100px;
}

＆＃13;

<label>
    <span>USARI:</span>
    <input type="text" />
</label>
<label>
    <span>CLAU:</span>
    <input type="text" />
</label>
<label>
    <span></span>
    <input type="password" />
</label>

＆＃13;

您的HTML代码中存在少量错误，您关闭了代码label，但您从未打开它。您还应将字段包装在标记中并将标签包装在标记中。您无需一直打开标记

，您可以在表单的开头和结尾打开它并关闭它。在代码的末尾还有一个-->，我认为这是另一个错误。

以下是我的问题解决方案：的 HTML

<label> <span>USARI:</span> <input type="text" /> </label> <label> <span>CLAU:</span> <input type="text" /> </label> <label> <span></span> <input type="password" /> </label>

这是我的css代码：的 CSS

label { display: block; } label span { display: inline-block; text-align: left; width: 100px; }

您现在可以使用CSS代码来查找您最喜欢的设计。

Answer 5

你必须使用带有2 tr和2 td的html表，每个表具有永久宽度。

如何在HTML中对齐输入元素？

5 个答案: