15

Webサイトのブランドに応じて、2つの入力フィールドのいずれかが1つの特定の場所に表示されるフォームがあります。

両方の入力フィールドを同じコンテナーに入れてから、スタイルシートでそのうちの1つをdisplay：none;に設定すると思いました。これはフィールドを非表示にしますが、それでもスペースを占有します。また、高さと幅を0に設定するか、可視性を非表示または折りたたみに設定しようとしましたが、いずれも機能しませんでした。

これまで、ブランディングはすべてcssスタイルシートで行うことができたので、そのままにしておきたいと思います。このソリューションは、少なくともIE6以降、Firefox 2以降、およびChrome（最新）でサポートされている必要があります。

4

7 に答える 7

17

入力を使ってみませんtype="hidden"か？

于 2009-07-03T09:01:57.197 に答える
13

position: absolute;レンダリングフローから除外する非表示の入力フィールドを設定するのはどうですか。

ただし、display: none理論的には同じように設定する必要があります...

于 2009-07-03T09:11:34.493 に答える
8 
<style>
.hideme
{
    display:none;
    visibility:hidden;
}
.showme
{
    display:inline;
    visibility:visible;
}
</style>


<input type="text" name="mytext" class="hideme">

class = "hideme"を設定してコントロールを非表示にするか、class="showme"を設定してコントロールを表示することができます。このトグルは、JavaScriptまたはサーバー側のコーディングを使用して設定できます。

于 2009-07-03T09:04:45.320 に答える
3

これはフィールドを非表示にしますが、それでもスペースを占有します。

これは起こらないはずです。display：noneを指定すると、要素がフローに含まれなくなります。CSSの残りの部分を確認します（Firebugを使用して、余分な「スペース」（おそらく周囲の要素のパディングまたはマージン）がどこから来ているのかを調べてください）。

于 2009-07-03T09:08:27.230 に答える
0

可視性プロパティを使用すると、要素が表示されていない場合でもレンダリングスペースが占有されます。可視性を使用する代わりに、表示プロパティを使用する必要があります。

要素を非表示にする場合は表示をnoneに設定し、表示する場合はブロックまたはインラインで表示することができます。

ディスプレイを見るには、これを確認してください

displayプロパティを設定しても問題が解決しない場合は、テキストボックスが完全に配置されている可能性があります。レイアウトを変更しない理由かもしれません。

完全なコードを投稿していただけますか？

于 2009-07-03T09:09:23.873 に答える
-1

私はCSSにあまり詳しくありませんが、JavascriptとCSSを組み合わせた JQueryを実装して、比較的簡単にそのようなことを実行できるようにすることができます。

于 2009-07-03T08:59:32.990 に答える