なぜ入力幅を set_html/css_WEB-ITnose にできるのか-htmlチュートリアル-php.cn

ディスカッションへの返信（解決策）

ホームページ

ウェブフロントエンド

htmlチュートリアル

なぜ入力幅を set_html/css_WEB-ITnose にできるのか

Jun 24, 2016 pm 12:15 PM

CSSの定義上、インライン（インライン）要素の幅と高さを設定することはできないのですが、インライン要素であるShenmaの入力はどうなるのでしょうか？専門家の方は説明していただけませんか

ディスカッションへの返信（解決策）

おはようございます、
つまり、input がインライン（インライン）要素ではないということは、CSS の定義によって切り替えることができます

firebug を使用すると、それがインライン要素であるかどうかがわかります。入力がインラインブロックであることは当然だと思っていましたが、今日、これが実際には生きたインライン要素であることがわかりました。これはなぜですか?

レイアウト中に偶然興味深い問題を発見しました。以前の概念では、<input> はインライン要素であり、インライン要素の幅と高さを決定することはできません。しかし、明らかに <input> には幅と高さを指定できます。理解するには、まず inline-block 属性を理解する必要があります。ここをクリックして inline-block 属性を参照してください。実際、inline-block 属性は、要素の外側がインライン要素であるのに対し、内側はブロックレベルの要素であることを意味し、<input> は自然な inline-block 属性を持ちます。これは、<input> 要素の外側の部分がインライン要素であるため、新しい行を開始しませんが、内側の部分がブロックレベルの要素であるため、幅と高さを固定することができます。したがって、インライン要素とブロックレベル要素について話すときは、<input> を特殊なケースとして理解する必要があります。 ..

これは誰かの説明です。。。

ざっくりこんな感じで理解できます:
インライン(inline)要素とは、spanなどのデータ表示要素において、左右の要素に対して他の兄弟要素と同じ行に表示できる要素を指します。 input などの入力要素については、幅と高さを設定することはできませんが、高さは設定できると推定されます。。。このように理解する必要があるようです、

あるレイアウト中に偶然興味深い問題を発見しました。以前の概念では、<input> はインライン要素であり、インライン要素の幅と高さを決定することはできません。しかし、明らかに <input> には幅と高さを指定できます。理解するには、まず inline-block 属性を理解する必要があります。ここをクリックして inline-block 属性を参照してください。実際、インラインブロック機能は、要素の外側がインライン要素であり、実際に <input> がブロックレベルの要素であることを意味します。以前はそう理解していましたが、。 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 コード
<!doctype>
<head>
<body>値 "テキスト" id="入力"/>それともどこで見たのですか？

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。