CSS要求指示符顯示不正確

我不知道在CSS是什麼原因造成的*顯示框的下面，當我微小添加類到DIVCSS要求指示符顯示不正確

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

檢查出的jsfiddle ：https://jsfiddle.net/pfqqmmfn/

如果類微小被刪除，然後*顯示文本框之後像預期的那樣。我仍然在學習CSS，所以任何幫助都會很棒。我知道它必須是簡單的東西，但我找不到問題。

感謝您的任何幫助。

來源

2016-05-03 Kris Hahn

我你的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:relative;上有你的星號僞元素，所以通過給這個項目設置.tiny類，你可以將它的寬度設置爲135px（同樣重要！），從而阻止小星號在那裏出現。

來源

2016-05-03 23:52:52

正是我所需要的。感謝您的解釋。我知道剛好夠CSS，但我需要學習更多。我知道這是寬度的東西，但我無法弄清楚是什麼導致它不適合。 –

不客氣！ :) –

如果添加此

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

它將覆蓋內置的規則，使您的問題（使輸入字段容器太窄，讓旁邊的asteriks）。您可以嘗試使用不同的寬度設置。

https://jsfiddle.net/zLoqy3py/

來源

2016-05-03 23:53:57 Johannes

CSS要求指示符顯示不正確

回答

相關問題