Question

我无法使用这个HTML / CSS。

我有3个输入，带有搜索框和2个按钮。我希望当浏览器宽度足以处理它时，搜索框增长到400px的最大宽度，但也缩小到适合宽度的100％减去移动浏览器之类的东西的2个按钮的宽度。我不希望按钮包裹。

这就是我想要的：

桌面/大显示屏：

|                                                          |
|            SSSSSSSSSSSSSSSSSSSSSSSSSSSSSS A B            |
|                                                          |

移动/小显示器：

|                  |
| SSSSSSSSSSSS A B |
|                  |

这是我到目前为止所得到的。使用div方法时，不考虑按钮的组合宽度，当浏览器收缩时它们会滚动页面。表格方法很接近，但是当浏览器放大时，按钮会抓住浏览器的右侧。

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>

Zhihao Jia的建议（工作不正常）

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

Answer 1

对于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>

Answer 2

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

仅粘贴更改的代码 -

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

Full Demo

注意：如果内容没有适合可用显示的空间 - 将不在视野范围内，但仍可通过滚动显示。因此，使用宽度来优化显示。我不确定您是否可以将搜索栏保持在给定宽度的位置，并且当按钮在当前视图中没有任何空间时，也希望按钮保持在同一视图中。

一个居中的搜索框+按钮，它们以最大宽度增长和缩小，没有包裹

2 个答案: