html - 跨度中的 CSS 间距以显示错误消息

Question

我有下面的 jsfiddle 我需要知道如何增加 span 中错误消息的空间，以便正确显示整个消息。

JSFiddle

    <form method="post" action="" id="subscribeForm" name="subscribeForm">
        <fieldset>
            <label>Name: </label><input type="text" class="effect" name="name" id="name"  autocomplete="off" >
            <span id="nameInfo">What's your name?</span>
        </fieldset>

        <fieldset>
            <label>Email: </label><input type="text" class="effect" name="email" id="email"  autocomplete="off" >
            <span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
        </fieldset>

        <div id="button">
            <input type="submit" value="Subscribe" name="subscribeForm"/>
        </div>
        <div id="success">
            <strong>Data Saved Successfully.</strong>
        </div>
    </form>

CSS 代码

    #subscribeForm span.error{
                color: #e46c6e;
            }

            #subscribeForm input.error{
                background: #f8dbdb;
                border-color: #e77776;
            }

            #subscribeForm span.error{
                color: #e46c6e;
            }

            #subscribeForm span{
                margin-left: 50px;
                color: #b1b1b1;
                font-size: 11px;
                font-style: italic;
            }

JSFiddle

Answer 1

尝试增加字段集的高度。

fieldset {
        overflow:hidden;
        border:0;
        height:50px;    
        margin:3px 0;
    }

JSFiddle

Answer 2

增加字段集或表单的宽度将完全显示错误文本。所以试试，

form {
  ...
  width: 285px;
  ...
}

如果您不想显示更大的表单，请尝试单独设置字段集的宽度，例如，

fieldset {
  ...
  width: 270px;
  ...
}

在这里查看演示 ，我在这里设置了字段集的宽度，表单大小没有改变。