1

我坚持让这个 HTML/CSS 工作。

我有 3 个输入，一个搜索框和 2 个按钮。当浏览器足够宽以处理它时，我希望搜索框的最大宽度增加到 400 像素，但也缩小到适合 100% 的宽度减去移动浏览器之类的 2 个按钮的宽度。我不想让按钮换行。

这就是我想要的：

桌面/大显示器：

|                                                          |
|            SSSSSSSSSSSSSSSSSSSSSSSSSSSSSS A B            |
|                                                          |

移动/小型显示器：

|                  |
| SSSSSSSSSSSS A B |
|                  |

这是我到目前为止所得到的。使用 div 方法，不考虑按钮的组合宽度，当浏览器缩小时它们会滚动到页面外。表格方法是关闭的，但是当浏览器放大时，按钮会紧贴浏览器的右侧。

分区：

<html>
  <head>
    <meta name="viewport"
    content="width=device-width, initial-scale=1" />
    <style type="text/css">
        .search {
            text-align: center;
            padding:5px;
            white-space:nowrap;
        }
    </style>
  </head>
  <div id="SearchDiv" class="search">
    <input type="text" id="SearchTextBox" x-webkit-speech=""
    speech="" style="width:100%;max-width:400px" />
    <input type="submit" value="Find" id="FindButton" style="" />
    <input type="submit" value="More" id="MoreButton" style="" />
  </div>
</html>

桌子：

<html>
  <head>
    <meta name="viewport"
    content="width=device-width, initial-scale=1" />
    <style type="text/css">
    .search {
        text-align: center;
        padding:5px;
    }
    </style>
  </head>
  <table class="search" align="center" width="100%"
  cellpadding="0">
    <tr>
      <td width="100%">
        <input type="text" id="SearchTextBox" x-webkit-speech=""
        speech="" style="width:100%;max-width:400px;" />
      </td>
      <td>
        <input type="submit" value="Find" id="FindButton" />
      </td>
      <td>
        <input type="submit" value="More" id="MoreButton" />
      </td>
    </tr>
  </table>
</html>

贾志豪的建议（不能正常工作）

分区：

<html>
  <head>
    <meta name="viewport"
    content="width=device-width, initial-scale=1" />
    <style type="text/css">
        .search {
            text-align: center;
            padding:5px;
            white-space:nowrap;
            max-width:400px;
        }
    </style>
  </head>
  <div id="SearchDiv" class="search">
    <input type="text" id="SearchTextBox" x-webkit-speech=""
    speech="" style="width:100%;" />
    <input type="submit" value="Find" id="FindButton" style="" />
    <input type="submit" value="More" id="MoreButton" style="" />
  </div>
</html>

桌子：

<html>
  <head>
    <meta name="viewport"
    content="width=device-width, initial-scale=1" />
    <style type="text/css">
    .search {
        text-align: center;
        padding:5px;
    }
    </style>
  </head>
  <table class="search" width="100%"
  cellpadding="0">
    <tr>
      <td align="right">
        <input type="text" id="SearchTextBox" x-webkit-speech=""
        speech="" style="width:100%;max-width:400px;" />
      </td>
      <td align="left">
        <input type="submit" value="Find" id="FindButton" />
        <input type="submit" value="More" id="MoreButton" />
      </td>
    </tr>
  </table>
</html>
4

2 回答 2

0

根据我对问题的理解，请尝试以下解决方案 -

仅粘贴更改后的代码 -

<div id="SearchDiv" class="search"style="min-width:480px;" >
<input type="text" id="SearchTextBox" x-webkit-speech=""
speech="" style="width:70%;min-width:100px" />

完整演示

注意：如果内容没有空间容纳可用的显示 - 它会消失，但仍然可以通过滚动看到。因此，使用宽度来优化显示。我不确定您是否可以将搜索栏保持在给定宽度的位置，并期望按钮在没有任何空间留在当前视图中时也保持在同一视图中。

于 2012-06-16T08:32:40.027 回答
0

对于 div 方法，您可以通过在 div（包含元素）而不是文本框上设置 max-width 来考虑按钮的宽度。

对于表格方法，您可以通过将两个按钮放在一个 td 中，然后在按钮 td 上设置 align=left 并在文本框 td 上设置 align=right 来避免按钮拥抱右侧。您还需要从文本框 td 中删除 width=100%。像这样的东西：

<tr>
  <td align="right">
    <input type="text" id="SearchTextBox" x-webkit-speech=""
    speech="" style="width:100%;max-width:400px;" />
  </td>
  <td align="left">
    <input type="submit" value="Find" id="FindButton" />
    <input type="submit" value="More" id="MoreButton" />
  </td>
</tr>
于 2012-06-16T02:37:17.150 回答