获取选择标记以进行响应

Question

我目前正在使用HTML5和CSS3编写一个响应式页面,在我的HTML中,我有一个表单.表单包含一个响应的表,并在页面缩小时折叠.我唯一的问题是select标签不会与其他表单元素一起折叠.这是我的HTML和CSS -

<tr>    
    <td id="content">Email Address</td>
    <td><input type="text" name="name" id="name" class="form"></td>
</tr>

<tr>
    <td id="content">Password</td>
    <td><input type="password" name="name" id="name" class="form"></td>
</tr>

<tr>
    <td id="content">Confirm Password</td>
    <td><input type="password" name="name" id="name" class="form"></td>
</tr>

<tr>
    <td id="content">Security Question</td>
    <td>
        <select class="form">
            <option value="#">--Select Question--</option>
            <option value="#">What Is Your Father's Middle Name?</option>
            <option value="#">In What Town Did You Spend Most Of Your Youth?</option>
            <option value="#">What Was Your Best Friend's Name When You Were A Child?</option>
            <option value="#">What Was Your Favorite Childhood Pet's Name?</option>
            <option value="#">What Was The Name Of Your Favorite Food As A Child?</option>
            <option value="#">What Year Did You Graduate High School?</option>
            <option value="#">Who Was Your Childhood Hero?</option>
        </select>
    </td>
</tr>

CSS:

table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) {
    background-color:#fff; /*#eee*fixed/
}
th { 
  /*background: #fff;*/ 
  color: black; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  /*border: 1px solid #ccc; */
  text-align: left !important;
  font-size:13px;
}
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
}

文本框折叠时,select标签不会折叠.拜托,我该如何解决这个问题？

Answer 1

在媒体查询中,width在select元素上设置a .这将使选择框的宽度正确,但任何长于该框的文本都将被截断.

@media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px) {
    /* ... */
    select {
        width: 150px;
    }
}

JSFiddle

编辑:应用于word-wrap: break-word;select元素允许select选项不被切断并换行到下一行,尽管你必须要小心每一行的长度,因为它break-word可以在单词中断.

New JSFiddle