使选择标签具有响应性

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; 
    }
}

当文本框收缩时，选择标签不会收缩。请问我该如何解决这个问题？

- gbade_

---

这可能会对你有所帮助：http://css-tricks.com/convert-menu-to-dropdown/ - Dan

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可能会在单词内部断开。

新 JSFiddle

- quw

---

这将削减选项的文本。如果所有选项都以类似的文本开头，比如“什么是...”，你可能永远看不到正确的选项。 - BReal14

为什么忽略宽度在761像素和767像素之间的屏幕？ - AntonChanning

我刚刚使用了OP的媒体查询。 - quw

Answer 2

一个选择框只会缩小到可选择文本的最长部分。因为你的选项之一是“当你还是孩子的时候，你最好的朋友叫什么名字？”，所以它永远不会比那一行更小，即使那一行没有被选择。

在你的媒体查询中，你可以改变文本大小来缩小这些长选项，使它们至少稍微小一点。

- GifCo

---

谢谢大家。我采用了quantumwannabe的想法，但是我没有固定宽度，而是将其设为100%。 - gbade_