<div id="MyDiv">ページ幅に応じてサイズ変更される要素があります。<input>および<a>要素が含まれています。
<a>の右側で整列させ、の左側との右側の間の空きスペースに合わせてストレッチするに<div>はどうすればよいですか?<input><div><a>
また、次の行にジャンプしてはならず、コンテナに<a>も定義さmin-widthれています。max-widthコードは次のとおりです。
<div id="MyDiv" style="background:#AAAAAA; width:100%; min-width:300px; max-width:600px;">
<input type="text" id="MyInput"/>
<a id="MyButton" href="#">Button</a>
</div>
とデモ。
これは CSS3 で簡単に実行できますが、IE9 以下では機能しません。IE10 は、標準をサポートする最初の Internet Explorer バージョンです。他のブラウザーは、関連するフレキシブル ボックスのプロパティを既にサポートしています。
div {
background: #AAAAAA;
width: 100%;
min-width: 300px;
max-width: 600px;
display: -webkit-flex;
}
input {
-webkit-flex: 1;
}
a {
margin: 0 10px;
}<div>
<input type="text" />
<a href="#">Button</a>
</div>最適なオプションは、jQueryを使用して幅を計算することです。これを試して：
$( window ).bind("resize", function(){
fitInput();
});
//resize on window change
$(document).ready(function(){
fitInput();
});
//resize after loading
function fitInput(){
var divW = $("#MyDiv").width();
var buttonW = $("#MyButton").width();
$("#MyInput").width(divW - buttonW - 10);
}
//resize function
フィドル： http： //jsfiddle.net/Burnacid/aGHqV/4/
絶対配置を使用できます。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="MyDiv" style="position:relative;background:#AAAAAA; min-width:300px; max-width:600px;padding:0px 2px">
<input type="text" id="MyInput" style="padding:0px;margin:0px;border:0px;width:100%;"/>
<a id="MyButton" href="#" style="position:absolute;right:0px;top:0;padding:0px 2px; background:#aaa;">Button</a>
</div>
<body>
</html>
このhtmlを試してください：
<div id="MyDiv" style="background:#AAAAAA; width:100%; min-width:300px; max-width:600px;">
<input type="text" id="MyInput" style="width:74%;float:left"/>
<a id="MyButton" href="#" style="width:24%;float:right">Button</a>
</div>
私はまさにこの問題の解決策を探していましたが、少なくとも同じ問題だと思います。私もそれを解決しました。説明させてください。
ブラウザーによっては、テキスト ボックスが長すぎたり短すぎたりすることがありましたが、意図したとおりに収まることもありました。コンストラクトを使用@meadiaして、クライアント ビューポートのサイズに応じて UI をスケーリングし、スケーリングが 100% の場合にのみ完全に適合することに気付きました。これにより、別の解決策にたどり着きました。むしろ、別の問題を指摘しました。
これがすべてのブラウザーに当てはまるかどうかはわかりませんが、CSS ファイルの先頭 (CSS リセット部分) にいくつかの簡単な設定を追加し、以下を追加することで解決できました。
/***************************************************/
/* Hack to make input[type='text'] fit width of
parent element */
input {font-size: 1em;} /* omitting [type=... deliberately */
textarea {font-size: 1em;}
/***************************************************/
/* Media scaling */
* {margin: 0; border: 0; padding: 0;}
html {min-width: 300px;}
body {font-size: 80%;} /* Default */
@media (min-width: 400px) {body {font-size: 80%;}}
@media (min-width: 600px) {body {font-size: 90%;}}
@media (min-width: 900px) {body {font-size: 95%;}}
@media (min-width: 1300px) {body {font-size: 100%;}}
@media (min-width: 1800px) {body {font-size: 110%;}}
@media (min-width: 2400px) {body {font-size: 120%;}}
どうやら、スケーリングの前にフォントサイズを指定する CSS リセットを使用すると、問題が解決するようです。これも実は一理あると思います。忘れがちなことは、要素が本体から常に正しく継承されているとは限らないことです。この場合、テキスト型の入力 (およびテキストエリア) です。
width: 100%;TD または DIV でテキストボックスのスタイルを設定していること、および も設定していることを確認してくださいbox-sizing: border-box;。それを機能させる必要があります。
お役に立てれば。
<head>これをタグに追加するだけです
input{width:92%;}