Question

当我将微小类添加到 div 时，我不确定CSS中的内容会导致*显示在文本框下方p>

<div class="editor-field tiny required-indicator">

查看jsfiddle：https://jsfiddle.net/pfqqmmfn/

如果删除了 tiny 类，那么*会在文本框之后显示，如预期的那样。我还在学习CSS，所以任何帮助都会很棒。我知道它必须简单，但我找不到问题。

感谢您的帮助。

Answer 1

我更新了你的JSFiddle：https://jsfiddle.net/pfqqmmfn/2/

我将.required-indicator:after（小星号）更改为：

.required-indicator:after
{
    content: "*";
    display:block;
    font-weight: bold;
    color: Red;
    width:20px;
    height:20px;
    position:absolute;
    left:calc(100% + 10px);
    top:0;
}

并将position:relative;添加到您的.tiny课程中。父对象的相对位置（.tiny）允许我在其上使用position：absolute：after伪元素（表现为其子元素）。

你在position:relative;上有你的星号伪元素，所以通过给这个项目.tiny类，你可以将它的宽度设置为135px（同样也是！important），从而阻止小星号进入那里。

Answer 2

如果你添加这个

form div.tiny {
  width: 120px !important;
}

它会覆盖导致问题的内置规则（使输入字段容器太窄而不允许旁边的星号）。您可以尝试使用不同的宽度设置。

https://jsfiddle.net/zLoqy3py/

CSS必需指示器显示不正确

2 个答案: