html - 将跨度的大小设置为静态，因此它不依赖于内容的大小

Question

我有两个文本框(表单的一部分)，在同一行，我想在每个文本框下放置一个 <span>显示填充数据的任何错误。我面临的问题是第一个框下的错误大小改变了第二个框下错误的位置。

我添加了一些图片以便更清楚地理解。

这是我的 html 代码:

            <form id="notify" method="post" action="add_notify.php">            
            Name: <input type="text" class="formname" name="name" value="" size="20"/>
            Email: <input type="text" class="formname" name="from" value="" size="20"/>
            <input type="submit" class="sendform" name="submit" onclick="processInfo()" value="Go!"/>
            <br/>
            <span id="name_error" class="nameerror">Name Error foo bar blah blah</span>
            <span id="email_error" class="emailerror">Email Error</span>
            </form>

这是相关的 CSS:

.formname{
    background: #FFFFFF;
    font-family: helvetica, arial, sans-serif;
    color: #000000;
    padding: 10px;
    border: 1px solid #30435D;
    font-size: 18px;
    margin: 0 15px 0 0;
    width: 170px;
    font-weight: bold;
}
.nameerror, .emailerror
{
    color:red;
    font-size:small;
    padding-left:60px;
    width:300px;


}
.emailerror
{
    padding-left:200px;

}

Answer 1

使用 float <div>显示错误。需要 block 级元素，以便 width会影响的。

HTML:

<div id="name_error" class="nameerror">Name Error  foo bar blah blah blah blah blah blah blah</div>
<div id="email_error" class="emailerror">Email Error</div>
<div style="clear: both;"></div>

还有 CSS:

.nameerror, .emailerror
{
    float: left;
    color: red;
    font-size: small;
    width: 170px;
}

.nameerror
{
    margin-left: 45px;
}
.emailerror
{
    margin-left: 90px;
}

Live test case .

额外的<div>需要使用“clear”才能正确显示更多内容，还将宽度更改为与输入框相同的宽度，没有一点错误比它们所代表的输入长。