Question

我目前有一个简单的表单，标签位于输入框的上方，并添加了第二个标签元素，用于提示/错误消息。

<form id="registerForm" method="POST" action="register_post.php">

    <p class="form-registerUserName">
        <label for="registerUserName">User Name</label>
        <span class="required">*</span>
        <input
            id="registerUserName"
            type="text"
            size="24"
            maxlength="24"
            value="<?php echo $_SESSION['registerUserName'];?>"
            onkeyup="validateName()"
            onblur="validateName()"
        >
        <label class="hint" for="registerUserName">hint error</label>
    </p>
</form>

将第二个标签元素放置在输入框右侧固定距离并垂直居中于盒子的最佳方法（顺式）是什么？这是为html添加提示元素的最佳方法吗？

我想让它看起来像这个页面上的第一个例子：https://ux.stackexchange.com/questions/26173/what-is-best-practice-for-designing-form-error-messages

提前致谢。

Answer 1

有很多方法，我喜欢这个：（为HTML中的输入元素添加了一个包装）

p > label, p > span {
    display: table-cell;
    vertical-align: middle;
}
p {
    display: table;
}
p > .input-wrapper + label {
    padding-left: 10px;
    max-width: 200px;
}

<强> Working Fiddle

Updated Fiddle

Answer 2

我会通过将标签放在包装div中，然后将它们向左浮动以使它们并排放置，然后在第二个标签上使用填充来调整间距，这样做。

<form id="registerForm" method="POST" action="register_post.php">
<div id="wrapper">
<p class="form-registerUserName">
    <label for="registerUserName">User Name</label>

    <span class="required">*</span>
    <input
        id="registerUserName"
        type="text"
        size="24"
        maxlength="24"
        value="<?php echo $_SESSION['registerUserName'];?>"
        onkeyup="validateName()"
        onblur="validateName()"
    >
    <label class="hint" for="registerUserName">hint error</label>
</div>
</p>

和CSS

#wrapper{
float:left;
}

.hint{
padding-left:20px;
}

希望这有帮助

Answer 3

感谢您的回复。

使用CSS表元素的第一种方法有效，但太混乱了。

所以我最终只是将upperLabel元素放在一个包装器中然后 - ＆gt;显示：块;在那些。

然后只为.hint添加了保证金。

所以......

<form id="registerForm" method="POST" action="register_post.php">

<p class="form-registerUserName">

    <div class="upperLabel">
        <label for="registerUserName">User Name</label>
        <span class="required">*</span>
    </div>

    <input
        id="registerUserName"
        type="text"
        size="24"
        maxlength="24"
        value="<?php echo $_SESSION['registerUserName'];?>"
        onkeyup="validateName()"
        onblur="validateName()"
    >
    <label class="hint" for="registerUserName">hint error</label>
</p>
</form>

CSS ..

.upperLabel {
    display: block;
}

.hint {
    margin-left: 12px;
    color: red;
}

我知道这是非常基本的。

感谢大家的帮助。

CSS - 如何将错误/提示消息放在输入框的右侧

3 个答案: