0

我试图让这两个选择适合他们的父母，但仍然没有成功。它看起来像这样：

它是由一个表完成的，这两个选择被放置在父表的一个单元格中的新表中。

这是我正在使用的代码。

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

0

试试这个

        <table class="mytable">
          <tr>
            <td class="styled-select">
              <select name="day" id="day"  required>
                <option></option>
                <option value="1">1</option>
                <option value="2">2</option>            
              </select>
            </td>
            <td class="styled-select2">
              <select name="month" id="month"  required>  
                <option></option> 
                <option value="1">January</option>
                <option value="2">February</option>         
              </select>                    
            </td>
          </tr> 
        </table>

和CSS

.mytable{width:100%}

.styled-select2
{
width:70%
}


select{width:100%}

.styled-select 
{
width:30%;
}

这是一个小提琴

于 2013-08-05T19:06:14.933 回答