ホームページ >ウェブフロントエンド >htmlチュートリアル >なぜ入力幅を set_html/css_WEB-ITnose にできるのか
なぜ入力幅を set_html/css_WEB-ITnose にできるのか
- WBOYオリジナル
- 2016-06-24 12:15:241507ブラウズ
CSSの定義上、インライン（インライン）要素の幅と高さを設定することはできないのですが、インライン要素であるShenmaの入力はどうなるのでしょうか？専門家の方は説明していただけませんか
ディスカッションへの返信（解決策）
おはようございます、
つまり、input がインライン（インライン）要素ではないということは、CSS の定義によって切り替えることができます
firebug を使用すると、それがインライン要素であるかどうかがわかります。入力がインラインブロックであることは当然だと思っていましたが、今日、これが実際には生きたインライン要素であることがわかりました。これはなぜですか?
レイアウト中に偶然興味深い問題を発見しました。以前の概念では、d5fd7aea971a85678ba271703566ebfd はインライン要素であり、インライン要素の幅と高さを決定することはできません。しかし、明らかに d5fd7aea971a85678ba271703566ebfd には幅と高さを指定できます。理解するには、まず inline-block 属性を理解する必要があります。ここをクリックして inline-block 属性を参照してください。実際、inline-block 属性は、要素の外側がインライン要素であるのに対し、内側はブロックレベルの要素であることを意味し、d5fd7aea971a85678ba271703566ebfd は自然な inline-block 属性を持ちます。これは、d5fd7aea971a85678ba271703566ebfd 要素の外側の部分がインライン要素であるため、新しい行を開始しませんが、内側の部分がブロックレベルの要素であるため、幅と高さを固定することができます。したがって、インライン要素とブロックレベル要素について話すときは、d5fd7aea971a85678ba271703566ebfd を特殊なケースとして理解する必要があります。 ..
これは誰かの説明です。 。 。
ざっくりこんな感じで理解できます:
インライン(inline)要素とは、spanなどのデータ表示要素において、左右の要素に対して他の兄弟要素と同じ行に表示できる要素を指します。 input などの入力要素については、幅と高さを設定することはできませんが、高さは設定できると推定されます。 。 。このように理解する必要があるようです、
あるレイアウト中に偶然興味深い問題を発見しました。以前の概念では、d5fd7aea971a85678ba271703566ebfd はインライン要素であり、インライン要素の幅と高さを決定することはできません。しかし、明らかに d5fd7aea971a85678ba271703566ebfd には幅と高さを指定できます。理解するには、まず inline-block 属性を理解する必要があります。ここをクリックして inline-block 属性を参照してください。実際、インライン ブロック機能は、要素の外側がインライン要素であり、実際に d5fd7aea971a85678ba271703566ebfd がブロック レベルの要素であることを意味します。以前はそう理解していましたが、 。 firebug を使って自分で確認したほうがよいでしょう。 。
インライン要素とは何か、ブロックレベル要素とは何かは理解しています。私に教育しないでください。 。
さて、テストした結果、これは Firefox のバグであることが判明しました。 。
<!doctype><html><head> <style> </style></head><body> <input type="text" value="text" id="input"/> <script> var input = document.getElementById('input'), input_style = window.getComputedStyle ? window.getComputedStyle(input, null) : input.currentStyle; alert(input_style.display); </script></body></html> 他のブラウザでは、入力は display=inline-block; ですが、Firefox ではインラインです。 。しかし、別の質問があります。IE6 ではインラインブロックがサポートされていません。IE6 を使用している人はテストを手伝ってくれますか? このように規定されています
インライン要素のボタンimgの幅を設定できます。 。 。説明方法
さて、テストした結果、これは Firefox のバグであることがわかりました。 。 JScript コード
b58a34321230aaefb1e48ec58d4b3453
93f0f5c25f18dab9d176bd4f6de5d30e
6c04bd5ca3fcae76e30b72ad730ca86d値 "テキスト" id="入力"/>それともどこで見たのですか？