ブロック要素内の行(インラインブロック)または隙間に間の解空間

問題が発生します

htmlコードのフォーマット、インデントやラップラベル以来。単一の要素にブラウザのデフォルトの処理結果は、ページ表示スペースの問題で存在するため、特にときにブロック要素のレイアウト明らかな効果で内側の列または行

例えば:

コード

 

ページ表示

第二に、ソリューション

 

 

 

この問題は非常にストレス発生するが、不十分な答えを探すために持っていた:ない互換性の問題は非常に完璧ではない、短期では、特殊な取り扱いのレイアウトが必要です。

 

私の最終的な解決策は以下のとおりです。ラインの右側にブロック要素セットのCSSスタイル内:マージン左:-4px。

 

これは根本的に問題を解決されていないが、しかし:なし互換性の問題、第二には、全体のレイアウトに影響を与えません。

変更されたページを表示

 

 

第三に、プログラムの他の首長の一部

 

1、折り返されません。

<div style="border:1px red solid">
<a style="display:inline-block;width:20%;">1111</a><a style="display:inline-block;width:80%;">2222</a> </div>

短所:あまりにもエレガントな、このようなコードを書き、貧しい人々の解釈。最も重要なことは、私は、このような一つだけの要素を書かれている滝、などの問題が発生した際にテンプレートを使用することであり、残りは自動的に追加された要素をループすることである、変更なしの行を制御する方法はありません。
2は、親要素のフォントサイズに設定:0
欠点:子要素、希望のフォントならば、それは、子要素でFONサイズの設定を追加する必要があります。私のように、テキストの絵を必要としない、しかし、もしそれが完璧です。
図3に示すように、何のインラインブロックの代わりに浮く
フロートは空白を無視することですが、あなたは再CSSレイアウトは心について過ごしたいかもしれませんが、設定のようなフロートをクリアするために関連することはできません。
。4、ワード間隔プロパティ
このプロパティは、頑固な残基1ピクセルギャップとブラウザIE7を固定するために、単語間に空白を設定するために使用され、以下のIE7のためのブラウザをハック、単語間隔が定義されている-1px問題。
対応する調整は、あなたのフォントサイズ、単語間隔の値に基づいている必要があります。そして、別のブラウザとの互換性が良くありませんが、個人的に私はこの方法をお勧めしません。あなたはそれをハックした場合、コードの多くは書くために、私は多くの問題を感じています。あなたはそれを使用する必要がある場合はどのように他の私が行うことができますか?:もちろん、あなたがトレーニングや準備、とにかくあなたを許すために、参照リンクを選択http://demo.doyoe.com/css/inline-block-space/
5、ホワイトスペース崩壊
CSS3テキストエフェクトモジュール**をそこに」 「ホワイトスペース崩壊」プロパティは、それが含まれている要素に空白文字を設定または取得するために使用されます。我々は、次の値が設定されています

  • 崩壊:ブランクは別の一連の文字の中に折り畳まれ(または、いくつかのケースでは、文字なし)されます。
  • 保存:ハードリターンのために予約空白、改行を折るユーザエージェントを防ぐために。
  • 値が空白文字を折るなどの「崩壊」ですが、行は改行を強制的に壊し保持:ブレークを維持します。
  • 捨てる:すべての空白を捨てます。
    今プロパティは明細書では「CSSテキストレベル4」に転送され、「ホワイトスペース」は、2つの部分に分かれています:ホワイトスペース崩壊とテキストの折り返し

捨てる:ホワイトスペース-崩壊:だから解決策はある
。しかし、プロパティ自体は、多くの問題が存在し、ブラウザベンダーがいないタイムリーなフォローアップと実装を行うので、それは単に不可能です。私は、このプロパティの棚は~~すぐに友人を願って

ギャングプログラム記述リンク  https://www.cnblogs.com/cuncunjun/p/7390623.html

 

おすすめ

転載: www.cnblogs.com/viulu/p/11614349.html