1

我有一个关于如何放置 div 类的简短问题。

我有两个错误层，其中包含一些我想回显的错误消息。对于每个错误消息层，我都有一个 div 类：

.wrapper #header #navline form .errol {
    color: #F23;
    position: absolute;
    z-index: 2;
    height: 26px;
    padding:8px; 
    display: inline;
    white-space: nowrap; 
    line-height: 26px;
    right: 100%;
    top: 8%;
}
.wrapper #header #navline form .errol2 {
    color: #FFF;
    position: absolute;
    z-index: 2;
    height: 26px;
    padding:8px; 
    display: inline;
    white-space: nowrap; 
    line-height: 26px;
    right: 100%;
    top: 28%;
}

问题是使用时top位置right是固定的。在另一个我用于相同任务的地方，而不是top我right将使用margin-left并且margin-top我没有以下问题的地方：

php 以不同的字符串长度回显不同的错误消息。使用时margin-left，margin-top只有 margin-top 可以正常工作。margin-left 将定位错误，因为 div 将扩展到两侧。所以我想知道是否有办法将右侧固定到固定位置，以便 div 仅在左侧延伸？

因此，如果有人可以帮助我，我将不胜感激。

更新：

显示一些图像我的意思。

这就像它应该是： 这是应该的

当字符串长度增加时会发生这种情况： 当字符串长度延长时会发生这种情况

更新2：

给出一些 HTML 代码：

<div class="small">
    <?php if (empty($errors['xxx']) === false){?>
        <input class="log-err" type="text" id="xxx" placeholder="xxx" name="xxx" value="<?php echo isset($xxx) ? $xxx : '';?>" />
        <div class='error'>
            <?php echo $errors['xxx'][0];?>
        </div>
    <?php }else{?>
        <input type="text" id="xxx" name="xxx" placeholder="xxx" value="<?php echo isset($xxx) ? $xxx : '';?>" />
    <?php };?>
</div>

和CSS：

/*Formatierung für Fehlermeldung Login/Email*/
.wrapper #header #navline form .error {
    color: #F23;
    position: relative;
    z-index: 2;
    height: 26px;
    padding:12px; 
    display: inline;
    white-space: nowrap; 
    line-height: 26px;
    right: 225px;  
    top: -4px;
}
.wrapper #header #navline form .error:before {
    content:"";
    position:absolute;
    z-index:2;
    left: 100%;
    width: 0px;
    top:-1px;
    height: 0px;
    border-top: 20px inset transparent;
    border-left: 20px dashed #f23;
    border-bottom: 20px inset transparent;
}

.wrapper #header #navline form .error:after {
    content:"";
    position:absolute;
    z-index:2;
    left: 100%;
    top:0px;
    width: 0px;
    height: 0px;
    border-top: 19px inset transparent;
    border-left: 18px dashed #fff;
    border-bottom: 19px inset transparent;
}

我现在遇到的问题是：

问题1

当回显另一个错误时：

问题 2

4

2 回答 2

1

看看这个并在那里取三角形。它将解决您的问题。

http://css-tricks.com/examples/ShapesOfCSS/

于 2013-03-12T07:49:58.637 回答
-1

尝试这个

.wrapper #header #navline form .errol {
color: #F23;
position: absolute;
z-index: 0;
height: 26px;
padding:8px; 
display: inline;
white-space: nowrap; 
line-height: 26px;
right: 100%;
top: 8%;

}

.wrapper #header #navline form .errol2 {
color: #FFF;
position: relative;
z-index: 1;
height: 26px;
padding:8px; 
display: inline;
white-space: nowrap; 
line-height: 26px;
right: 100%;
top: 8%;

}

于 2013-03-12T07:13:14.863 回答