html5 - aligning text inputs in fieldset with css -


i'm trying align text boxes in fieldset.. nothing seems work!! when i'm running css file, no matter do, text boxes start in different places html file:

    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>

after fixing width , adding clear:both code becomes

    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>


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -