この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>