0

您好，我在使用 z-index 时遇到问题。我有一个带有一些输入字段的表单。在他们旁边，我有一些错误 div 用于回显 php 错误消息。我遇到的问题是，只有在设置错误时才会出现的错误 div 会导致输入字段出现换行符。

.wrapper   #mainframe   #left #frame form fieldset ul .fr {
    width: 180px;
    float: left;
    margin-bottom: 18px;
    margin-left: 25px;
}
.wrapper #mainframe   #left #frame form fieldset ul input.err {
    width: 180px;
    height: 18px;
    line-height: 18px;
    padding-left: 5px;
    margin-top: 3px;
    outline:none;   
    background-image: url(../images/error.png);
    background-repeat:no-repeat;
    background-position: 172px 50%;
}
.wrapper #mainframe #left #frame form fieldset ul .erl {
    color: #FFF;
    position: relative;
    z-index: 1;
    background-color: #f23;
    width: 200px;
    height: 30px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    left: +217px;
    top: 25px;
}

这是html代码：

<li class="fr">
<label for="a">a</label>
<?php if (isset($errors['a'])):?>
<input class="err" type="text" id="a" name="a" value="<?php echo isset ($_POST['a'])? $_POST['a'] : ''; ?>" tabindex="20" autocomplete="off"/>
<?php if ( isset($errors['a']) 
&& empty($errors['a'][0]) == true ):?>

<?php echo "<div class='erl'>"; 
echo $errors['a'][0];
echo "</div>";
endif;?>

<?php endif;?>

所以我不明白为什么会这样。我认为使用 z-index 就像导致两层（z-index:0 和 z-index:1），因此第二层 z-index:1 的左右手边应该有足够的位置。如果有人能告诉我如何解决这个问题，我真的很感激。多谢。

4

3 回答 3

1

我会寻找可能会增加意外间距和整体宽度的填充和边距（http://css-tricks.com/the-css-box-model/）。

此外，检查以确保您应用 z-index 的任何元素都明确声明了它们的位置......还有父元素的定位（http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp）。

最后，我会看看 hasLayout 属性的问题 (http://www.satzansatz.de/cssd/onhavelayout.html)。这可能是 Vinny 所说的，因为 Z-index 不会像堆栈顺序那样改变文档流动的方式。尝试对错误消息使用 position:absolute 以将它们从文档的整体流程中删除。

于 2012-07-23T20:18:00.343 回答
0

为避免换行，您需要从文档流中删除错误元素。该z-index属性与此完全无关；它只影响元素的堆栈顺序，否则它与位置无关。

这就是为什么我把你推荐给这个jsfiddle；帮助解决问题的替代方法。

于 2012-07-23T19:17:55.733 回答
-1

尝试这个：

HTML：

<li class="fr">
    <label for="a">a</label>
    <input class="err" type="text" id="a" name="a" value="" tabindex="20" autocomplete="off"/>
    <div class='erl'> Error text</div>
    <div class="sp"></div>
</li>

CSS：

//for label
.fr label, .fr .err, .fr .erl {
    float:left;
}
.fr .sp {
    clear:both;
}
于 2012-07-23T19:29:39.200 回答