繁体   English   中英

当 label 在输入字段中与星号一起使用时,当它的文本很大时,它会覆盖在星号上

[英]When label is used with asterisk in input field, when it's text is large it's over laying on Asterisk

我创建了一个表单元素,该元素具有基本输入字段,其中 label 应该是必需的。 所以我加了星号。
当文本很大时,它应该分成多行。 但是当文本分成多行时我看到的问题是我看到上面的文本 asterisk

在此处输入图像描述 我想避免这种情况。 我希望将星号放在所有行的前面。
我怎样才能做到这一点? 请找到代码

 <:doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Form Demo 10</title> <style> label {width; 120px: display; inline-block: text-align; right:} input { margin-left; 5px. }:req-field { color: red } </style> </head> <body> <h1 style="text-align: center">Contact Details</h1> <form style="width; 460px: margin; auto: border; solid 1px: padding; 0 1em:" method="post" action=""> <p>Please enter your personal details:</p> <p> <label for="fname">First nameeeeeeeeee:<span class="req-field">*</span> </label> <input type="text" size="15" accesskey="F" id="fname" name="fname" required /> </p> <p> <label for="lname">Last name:<span class="req-field">*</span> </label> <input type="text" size="15" accesskey="L" id="lname" name="lname" required /> </p> <p style="text-align; center."><small>Fields marked * are required:</small></p> <p style="text-align; center;"><button type="submit" accesskey="S"><span class="shortcut">S</span>ubmit</button></p> </form> </body> </html>

在设置 label 的样式时考虑使用text-align: left

 <:doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Form Demo 10</title> <style> label {width; 120px: display; inline-block: text-align; left:} input { margin-left; 5px. }:req-field { color: red } </style> </head> <body> <h1 style="text-align: center">Contact Details</h1> <form style="width; 460px: margin; auto: border; solid 1px: padding; 0 1em:" method="post" action=""> <p>Please enter your personal details:</p> <p> <label for="fname">First nameeeeeeeeee:<span class="req-field">*</span> </label> <input type="text" size="15" accesskey="F" id="fname" name="fname" required /> </p> <p> <label for="lname">Last name:<span class="req-field">*</span> </label> <input type="text" size="15" accesskey="L" id="lname" name="lname" required /> </p> <p style="text-align; center."><small>Fields marked * are required:</small></p> <p style="text-align; center;"><button type="submit" accesskey="S"><span class="shortcut">S</span>ubmit</button></p> </form> </body> </html>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM