星号表示必填字段

我想在输入框后面放置一个“*”符号。我在显示时遇到问题。

This problem is due to inputbox css code. Here I attached my css,html within php code with a screenshot.

 echo '<p>Name<input type="text" name="pname" id="pname" size=18 maxlength=50 required value="'.$name.'" >*</p>';

         echo "<p>Email<input type=text name=email id=email size=18 maxlength=50 required onblur='javascript:myFunction(this.value,\"".$fet['email']."\");' value='".$email."' >*</p>";
         echo '<p>Phone<span id="error" style="color: Red; display: none"><img src="image/number.png" width=20px height=20/></span><input type="text" name="phone" size=18 maxlength=50 required onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" value="'.$phone.'" ></p>';
         echo '<p>Company Name<input type="text" name="cname" id="cname" size=18 maxlength=50 required value="'.$cname.'" ></p>';

输入的CSS代码

input {
display: inline-block;
float: right;
margin-right:20%;
}

您将字段向右浮动，因此它们被从队列中拔出并推到容器的右侧。星号不是浮动的，因此它们与也不是浮动的文本的其余部分保持一致。

要更正，您应该将字段和星号放置在本身向右浮动的容器中，而不是浮动字段。

我建议一个更像这样的结构instead:

<p class="field-wrapper">
    <label>Field label</label>
    <input type="text" name="fieldName" id="fieldId" size=18 maxlength=50 value="fieldValue" />
</p>

您可以添加一个required-field包装器上的类，如下所示：

  <p class="field-wrapper required-field">

...并像这样使用CSS：

p.field-wrapper input {
    float: right;
}
p.required-field label::after { 
    content: "*";
    color: red;
}

Try it: http://jsfiddle.net/q8rsLz16/ http://jsfiddle.net/q8rsLz16/

文档和相关阅读

• 关于通过 CSS 技巧实现浮动的所有内容 -http://css-tricks.com/all-about-floats/ http://css-tricks.com/all-about-floats/
• CSS ::before伪选择器 -https://developer.mozilla.org/en-US/docs/Web/CSS/::之前 https://developer.mozilla.org/en-US/docs/Web/CSS/::before
• CSS ::after伪选择器 -https://developer.mozilla.org/en-US/docs/Web/CSS/::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after