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

Question

我已经创建了一个表单元素，其中包含基本输入字段以及应该需要的标签。所以我添加了星号。
当文本很大时，它应该分成多行。但是当文本分成多行时我看到的问题是我看到星号上方的文本。

我想避免这种情况。我想把星号放在所有行的前面。
我怎样才能做到这一点？请找代码

<!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>

Answer 1

在设置标签样式时考虑使用 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>

这个替代方法使用:after伪元素来控制星号的位置：

<!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; position: relative;}
      label:after {
        content: '*';
        color: red;
        position: absolute;
        right: -8px;
      }
      input {
        margin-left: 5px;
      }
    </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:</label>
         <input type="text" size="15" accesskey="F" id="fname" name="fname" required />
      </p>
      <p>
        <label for="lname">Last name:</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>

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

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

html

css

forms

html-input