CSS必需的指示器顯示不正確

Question

我不確定在將微小的類添加到div時CSS中的什么會導致*顯示在文本框下方

<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）的相對位置，我可以在其：after偽元素（其子級行為）上使用position：absolute。

您的星號偽元素位於position:relative; 因此，通過為該項目提供.tiny類，您可以將其寬度設置為135px（也帶有！important），從而阻止小星號插入其中。

Answer 2

如果添加此

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

它會覆蓋導致您出現問題的內置規則（使輸入字段容器太窄而不能在其旁邊出現星號）。 您可以嘗試使用其他寬度設置。

https://jsfiddle.net/zLoqy3py/