让选择标签响应

Question

我目前正在使用 HTML5 和 CSS3 编写响应式页面，并且在我的 HTML 中，我有一个表单。该表单包含一个表格，该表格具有响应性并随着页面缩小而折叠。我唯一的问题是选择标签不会与其他表单元素一起折叠。这是我的 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; 
    }
}

当文本框折叠时，选择标签不会。请问，这个怎么解决？

Answer 1

在您的媒体查询中，在选择元素上设置width。这将导致选择框的宽度正确，但任何比框长的文本都将被截断。

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

JSFiddle

编辑： 将word-wrap: break-word; 应用于选择元素允许选择选项不被切断并换行到下一行，尽管您必须注意每个选项的长度行，因为break-word 可以在单词内中断。

New JSFiddle

Answer 2

选择框只会缩小到最长的可选择文本。因为你们中的一个选择是“你小时候最好的朋友叫什么名字？”它永远不会缩小到那条线以下。即使没有选择该行。

在您的媒体查询中，您可以更改文本大小以缩小这些长选择，使它们至少稍微小一些。