Question

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

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

Standard error size

longer error

这是我的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

尝试将表单放入表格中 - 这样，内容在一列中的位置（表单的“名称”一侧）不会直接影响另一列中内容的位置，因为您'看到这里。

Answer 2

使用浮动<div>来显示错误。需要块级元素，以便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

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

Answer 3

我会改用表格，用列替换span。如果您不想使用表格，则可以始终使用两个带有float=left技巧的div。

无论如何，我还会添加一个简单的：text-align: left;来识别错误和电子邮件错误，我还会将padding-left删除为电子邮件错误。

Answer 4

暗影巫师打败了我。使用浮动div。通过将显示设置为块，浮动，宽度起作用这是solution in jsFiddle

首先查看结果，然后取消注释javascript并再次运行以查看添加了更多文本的差异。

由于你将它们放在浮动div中，我建议对上面的格式做同样的事情。它取决于你的布局的逻辑，但我的猜测是，对于这种情况，你基本上想要列本身，或两个块。因此在左侧 div {float:left; width: 200px; }和下一个具有相同风格的div，向左浮动和全部。所以，让它成为一个类，并将div设置为该类。

然后在完成clear: both时清除div。如果你不清除浮子，就会发生坏事。

查看css显示属性，因为浮动，内联等等需要花点时间才能解决问题，但重要的是要彻底了解它。

祝你好运！

将span的大小设置为static，因此它不依赖于内容的大小

4 个答案: