html - 必填字段的星号

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

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

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

我会建议一个更像这样的结构而不是:

<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 技巧了解 float - 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