星号未正确显示在单击事件的输入旁边。

Question

请有人告诉我，为什么当我在这个小提琴中点击编辑，星号不是与输入字段对齐，而是显示在底部。

CSS

.required-field::after {
    display: none;
    content: "*";
    color: red;
    font-size: 23px;
    margin-left: 5px;
}

JS

 $("p").on('click', function(){     
              var $style = $('<style>');
                $style.appendTo('head');
                var base = ".required-field::after{display:block;}";
                $style.html(base);
                });

谢谢

Answer 1

您必须使用display:inline而不是块

 $("p").on('click', function(){     
              var $style = $('<style>');
                $style.appendTo('head');
                var base = ".required-field::after{display:inline;}";
                $style.html(base);
                });

.required-field::after {
    display: none;
    content: "*";
    color: red;
    font-size: 23px;
    margin-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='mvnDefinitionInput required-field'>
<input type='text' class='mvnDefinitionFieldExtraInput'/>
</div>
<p class='editDefMVN"'><span>Edit</span></p>

​