これらの 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;
}