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

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

@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

Answer 2

选择框只会缩小与最长可选文本一样小。由于你们中的一个选择选项是“当你还是个孩子时，你最好的朋友的名字是什么？”它永远不会缩小那条线。即使没有选择该行。

在您的媒体查询中，您可以更改文字大小以缩小这些长选项，使其至少略微缩小。

获取选择标记以进行响应

2 个答案: