1

このHTML/CSSを機能させるのに行き詰まっています。

検索ボックスと2つのボタンを備えた3つの入力があります。ブラウザーがそれを処理するのに十分な幅である場合、検索ボックスを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>
4

2 に答える 2

0

divメソッドの場合、テキストボックスの代わりにdiv(含む要素)にmax-widthを設定することで、ボタンの幅を考慮に入れることができます。

テーブル方式の場合、両方のボタンを1つの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 に答える
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 に答える