当 label 在输入字段中与星号一起使用时，当它的文本很大时，它会覆盖在星号上
[英]When label is used with asterisk in input field, when it's text is large it's over laying on Asterisk
问题描述
I've created a form element which has basic input field with label that should be required.
我创建了一个表单元素，该元素具有基本输入字段，其中 label 应该是必需的。 So I've added asterisk.所以我加了星号。
And when the text is large it should break to multiple lines.当文本很大时，它应该分成多行。 But the problem what I see when the text breaks to multiple lines is I see the text above asterisk .但是当文本分成多行时我看到的问题是我看到上面的文本 asterisk 。
I want to avoid this.
我想避免这种情况。 I want asterisk to be placed in front of all the lines.我希望将星号放在所有行的前面。
How can I do that?我怎样才能做到这一点？ Please find the code请找到代码
<: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>
1 个解决方案
解决方案1
0 2022-01-20 16:18:54
Consider using text-align: left when styling the label:在设置 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.