必填字段的星号

Question

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

此问题是由于输入框 css 代码造成的。在这里，我在 php 代码中附加了我的 css,html 和屏幕截图。

 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%;
}

Answer 1

您将字段向右浮动，因此它们被从线中拔出并推到容器的右侧。星号没有浮动，因此它们与未浮动的其余文本保持一致。

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

我建议的结构更是这样，而不是：

<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;
}

试试看：http : //jsfiddle.net/q8rsLz16/

文档和相关阅读

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