символ звездочки для обязательного поля

Question

Я хочу поместить символ «*» после поля ввода. У меня проблема при отображении.

Эта проблема возникает из-за кода ввода css. Здесь я прикрепил свой css, html в php-коде с скриншотом.

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::before { 
    content: "*"; 
    float: right; 
    color: red; 
} 

Попробуйте: http://jsfiddle.net/yvvc32Lc/

Документация & Связанные Чтение

• Все о поплавков через CSS Tricks - 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 и дать ему правильный запас