Question

我想在输入框后面加上'*'符号。我在显示时遇到问题。

此问题是由输入框css代码引起的。在这里，我将我的css，html在php代码中附加了截图。 enter image description here

 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/

文档＆amp;相关阅读

所有关于通过CSS技巧的Floats - 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

Answer 2

如果您想使用'margin-right：'，我认为您必须将星号与文本框联系起来。您可以将所有内容放入div中，并为其提供正确的边距

Answer 3

<label>Name<span  style="color:red"> *</span></label>
<input type="text" name="pname" id="pname" size=18 maxlength=50 required value="">
<div class="clearfix" style="margin-bottom:10px"> </div>


<label>Email<span  style="color:red"> *</span></label>
<input type="text" name="pname" id="pname" size=18 maxlength=50 required value="">

必填字段的星号符号

3 个答案: