Question

我正在尝试对齐字段集中的文本框..我没做什么似乎工作!! 当我运行CSS文件时，无论我做什么，文本框都会从不同的地方开始 HTML文件：

    fieldset {padding: 1em;
              padding-bottom:2em;
              padding-left:2em;
              border-width:5px;
              color:black;
              border-color:green;
              border-radius:5px;
              width:auto;
              text-align:left;
    
    }
    legend   {background-color:rgba(228, 200, 200, 0.78);
              color:black;
              opacity:0.6;
              border: 1px solid thin;
              padding: 10px 20px;
              text-align:left;
              border-radius:5px;
    }
    label {
        width:50%;
        margin-right: 0.5em;
        padding-top: 0.2em;
        padding-bottom:2em;
        text-align: left;
        font-weight: bold;
    
    }
    input{display:inline-block;}

     <fieldset>
        <legend>About Yourself</legend>
        <label>
            <span calss="title">Gender</span>
            <input id="female" type="radio" name="gender" value="F" />
            <label for="female">Female</label>
            <input id="Male" type="radio" name="gender" value="M" />
            <label for="Male">Male</label>
        </label>
        <br />
        <label>
            First Name
            <input type="text" name="First Name" size="30" maxlength="40" />
        </label>
        <br />
        <label>
            Last Name
            <input type="text" name="Last Name" size="30" maxlength="40" />
        </label>
        <br />
        <label>
            Date of Birth
            <input type="date" name"DOB" />
        </label>
        <br />
        <label>
            Cell Phone Number (No Dashes)
            <input type="text" name="Last Name" size="10" maxlength="10" />
        </label>
        <br />
        <label>
            Email Adrress
            <input type="email" name="email" size="30" maxlength="50" />
        </label>
        <br />
    </fieldset>

Answer 1

修正宽度并添加clear:both后代码变为

    fieldset > label {
      float: left;
      width: 200px;
    }
    fieldset {
      border-width: 5px;
      color: black;
      border-color: green;
      border-radius: 5px;
    }
    legend {
      background-color: rgba(228, 200, 200, 0.78);
      color: black;
      opacity: 0.6;
      border: 1px solid thin;
      padding: 10px 20px;
      border-radius: 5px;
    }
    label {
      clear: both;
      font-weight: bold;
      padding: 5px;
    }

<fieldset>
  <legend>About Yourself</legend>
  <label>
    <span calss="title">Gender</span>
    <input id="female" type="radio" name="gender" value="F" />
    <label for="female">Female</label>
    <input id="Male" type="radio" name="gender" value="M" />
    <label for="Male">Male</label>
  </label>
  <br />
  <label>
    First Name
    <input type="text" name="First Name" size="30" maxlength="40" />
  </label>
  <br />
  <label>
    Last Name
    <input type="text" name="Last Name" size="30" maxlength="40" />
  </label>
  <br />
  <label>
    Date of Birth
    <input type="date" name "DOB" />
  </label>
  <br />
  <label>
    Cell Phone Number (No Dashes)
    <input type="text" name="Last Name" size="10" maxlength="10" />
  </label>
  <br />
  <label>
    Email Adrress
    <input type="email" name="email" size="30" maxlength="50" />
  </label>
  <br />
</fieldset>

将字段集中的文本输入与css对齐

1 个答案: