簡體   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