0

これらの 2 つの Select を親に合わせようとしていますが、まだ成功していません。次のようになります。

これはテーブルによって実現され、これらの 2 つの選択は、親テーブルのセルの 1 つの新しいテーブルに配置されます。

これは私が使用しているコードです。

HTML:

<div id="content">
  <form id="formContent">
    <table>
      <tbody>
        <tr>
          <td><label for="fullName">Full Name</label></td>
          <td><input id="fullName" type="text" name="fullName" required></td>
        </tr>
        <tr>
          <td><label for="email">E-mail</label></td>
          <td><input id="email" type="email" name="email" required></td>
        </tr>
        <tr>
          <td> <label for="day">Birthday</label></td>
          <td>
            <table>
              <tr>
                <td>
                  <select name="day" id="day" class="styled-select" required>
                    <option></option>
                    <option value="1">1</option>
                    <option value="2">2</option>            
                  </select>
                </td>
                <td>
                  <select name="month" id="month" required>  
                    <option></option> 
                    <option value="1">January</option>
                    <option value="2">February</option>         
                  </select>                    
                </td>
              </tr> 
            </table>
          </td>
        </tr>
      </tbody>
    </table>             
  </form>  
</div>

CSS:

#content    {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 293px;
    margin: -8% 0 0 -156px;    
}

#formContent{  
  background:rgba(255,255,255,0.9);
  font-weight: normal;
  font-size: 0.7em;
  padding: 1em;
  text-align: right;
}

td { border: 0px solid black; margin:0; padding:0; width: 100%; }

input[type=text], input[type=email], select {
  background-color: #FFFEFD;
  border: solid 1px #F15922;
  color: #000000;
  height: 1.4em;
  padding-left: 1em;
}


select {
  -webkit-appearance: button;
  -webkit-user-select: none;
  background-image: url("../img/arrowR.png");
  background-position: center right;
  background-repeat: no-repeat;
  padding-left: 1em;
  float: right;
}
4

1 に答える 1