Question

我有两个文本箱(表格的一部分),其行文相同,根据每个文本,我想设一个<代码><span>,以显示所填数据的任何错误。 I m面临的问题是,第一个方框中的错误大小改变了第二个方框中的错误位置。

I ve added some images for clearer understanding.

Standard error size

“longer

Here is my html code:

            <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>

Here is the relevant 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

使用浮标线<代码><div>显示错误。需要有区级要素,以便<代码>width将影响到它。

传真:

<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>

And the CSS:

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

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

。

The extra <div> with "clear" is required to show further contents properly, also changed the width to the same width as the input boxes, no point having the errors longer than the inputs they represent.

Answer 2

在表格中填表——这样,在一栏(表格的“名称”一栏)中,内容的位置就会直接影响到其他栏目中内容的位置。

Answer 3

I would use a table instead, replacing span(s) with columns. If you don t want to use a table, you can always use two div(s) with the float=left trick.

Anyway I ll add also a simple: text-align: left; to nameerror and emailerror and I ll also remove the padding-left to emailerror.

Answer 4

Shadow Wizard beat me to the punch. Use floating divs. By setting display to block, the floating, widths work Here s the solution in jsFiddle

第一夫人参看结果,随后 un弃了 j,并再次看到与增加案文的区别。

Since you re putting them in floating div s I d suggest doing the same with the formatting above. It ll depend on the logic of your layout, but my guess is that for this situation, you essentially want to columns per se, or two blocks. Thus the left side in a div {float:left; width: 200px; } and the next div with same style, float left and all. So make that a class and set both div s to that class.

Then clear the div s when finished with clear: both. If you don t clear floats, bad things happen.

看看显示财产、浮动、直线等等,就意味着要把你的头 head起来,但必须彻底了解坏事。

Best of luck!

友情链接