1

您好我在使用css pseudo classes :before和:adter回显来自 div 层上的 php 的不同错误消息时遇到问题。

在input field我想显示一个div layer. 因此我使用z-index method，因为那个 div 是身体的前面。

现在我的问题是 div 层应该以与字符串长度不同的长度出现。在另一个问题中，有人给了我提示，而不是使用额外的 div 作为箭头，然后使用 div 层将两者合并为一个。因此，我在网上找到了使用pseudo classes和创建speechbubble. 当我寻找它时，我发现几乎所有地方都一样。

div 层是相对对象，箭头是子对象。在我的情况下，它需要反过来。箭头必须是相对对象，因为它fixed position位于输入字段旁边。thediv layer的长度是可变的，但应附加在箭头的左侧。

css所以我遇到的问题是设置类似时不会显示div层：

.wrapper #header #navline form .erm { //the div layer for the arrow that will be placed next to the input field
    position:absolute;
    z-index:2;
    width: 0px;
    margin-left: -25px;
    margin-top: -10px;
    height: 0px;
    border-top: 20px inset transparent;
    border-left: 22px dashed #f23;
    border-bottom: 20px inset transparent;
}
.wrapper #header #navline form .erm:before { // to border arrow
    content:"";
    position:absolute;
    z-index:2;
    margin-left: -22px;
    margin-top: -17px;
    width: 0px;
    height: 0px;
    border-top: 17px inset transparent;
    border-left: 19px dashed #f2f2f2;
    border-bottom: 17px inset transparent;
}
.wrapper #header #navline form .erm.left { //the wrapper with the text that should be append left to the arrow
    content:"";
    color: #F23;
    position: absolute;
    z-index: 2;
    height: 26px;
    padding:12px; 
    white-space: nowrap; 
    line-height: 26px;
    font-family:Arial, Helvetica, sans-serif;
}

这是html：

<?php if (empty($errors['a']) === false){?>
    <input class="error" type="text" id="a" name="a" value="<?php echo isset($a) ? $a : '';?>" />
<div class='erm'>
    <?php echo $errors['a'][0];?>
</div>
<?php }?>

我做了一些截图来展示我想要归档的内容。

这是它的样子：

前任

好吧，这就是我以前的样子。如图有红色箭头，上面的灰色层和文本的div层，什么都不可见。

因此，当将 div 层设置为相对对象时，当 strlen 比我之前定位的那个版本长时会发生这种情况：

ex2

或者当 strlen 更短时：

ex3

所以如果有人可以帮助我，我真的很感激。

多谢。

4

1 回答 1

2

我认为你几乎拥有你需要的一切。我会说您缺少的唯一细节是如何定位您的气泡。尝试仅设置正确的属性

.wrapper #header #navline form .erm.left { 

  right: 15px;

这应该将右边框锚定在您想要的位置，如果宽度发生变化，它将是左侧移动。

注意：我没有检查上面的像素值，这只是一个例子

编辑

我已经尽力使用你的小提琴：

更新

我添加了输入以使其更类似于我认为您想要的。然后我将您的 div（文本所在的位置）定位为绝对匹配输入位置，但使用正确的属性。这样您就不必担心文本长度。您只需要考虑为箭头留出一些空间。

最后，我把箭头放在它应该在的地方。

您不能相对于“父亲”元素定位伪元素（如 ::after）

于 2013-03-15T07:41:51.547 回答