1

div クラスの配置方法について簡単な質問があります。

エコーアウトしたいいくつかのエラーメッセージを含む2つのエラーレイヤーがあります。このエラー メッセージ レイヤーごとに、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位置が固定されることです。代わりに同じタスクに使用する別の場所で、次の問題がない場所でtopandrightを使用しますmargin-left。margin-top

php は、文字列の長さが異なるさまざまなエラー メッセージをエコーし​​ます。を使用するmargin-leftとmargin-top、margin-top のみが正常に動作します。div が両側に拡張されるため、margin-left は間違った位置に配置されます。だから私が知りたいのは、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

これを試して

.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 に答える