矢印の配置という 1 つの部分を除いて、非常にうまく機能する jQuery Sliding Drilldown プラグインを作成しました。それらが含まれている要素のフォントサイズ/行の高さを変更すると、それらが移動しますが、これは意味がありません。誰でも理由を教えてもらえますか? line-height は要素内の 0,0 の位置に実際に影響しますか? それとも、私が見逃している何か他のことが起こっていますか?
そして - これが本当の質問です - CSS だけでやろうとしていることを実行できますか? JavaScript を使用して動的に配置できることはわかっていますが、それを避けようとしています。
非常に単純なページのプラグインは次のとおりです。
http://thomporter.github.com/jquery-sliding-ajax-drilldown/demos/basic-plain.html
必要に応じて、CSS を生成するために使用したSassを確認することもできます。これはリポジトリにあります。
いくつかのテストを行ったところ、絶対位置に em を使用しているためです。たとえば、px に変更し、これも em ベースの padding-left を修正すると、font-size を変更すると矢印の動きが止まります。
ここでの問題は、必要な他の要素をすべて設定して収容font-sizeするタグを設定することです。<a>display:block
要素のフォント サイズを大きくすると、展開されemます。<a>矢印の画像も<a>要素にネストされており、絶対に配置されているため、コンテナー ボックスのサイズが変更されると、矢印の位置が変更されます。これは、サイジング、マージン、パディングなどに使用する単位の種類に関係なく発生します。
独自の要素内にテキストを含めるようにしてください。CSS をタイポグラフィ スタイルとポジショニング スタイルに分け、各行のテキストをスパン要素で囲みます。
<li>
<a href="#" data-id="BMW">
<span>BMW</span>
<span></span>
</a>
</li>
次に、このスパンに個別のフォント スタイルを適用して、次のようなものを適用します。
.ajaxdrilldown ul li a span:first-child {
display:inline-block; /* IE7 will need a hack for this */
position:relative;
left:0.3em;
font-size:1.4em;
...
}
これにより、他のアイテムのレイアウトに影響を与えることなく、テキストを独自の要素の範囲内で自由に拡張できます。
また、98 行目でこのスタイルを変更する必要があります。
.ajaxdrilldown div ul li a span
これらの線に沿った何かに
.ajaxdrilldown div ul li a span:last-child
スパンが互いに異なるスタイルを汚染するのを止める
ちなみに、display:block; 要素に width:100% を設定する必要はありません。width 宣言は不要であり、これをスタイリングする他の人に問題を引き起こす可能性があるため、完全に削除してください。
CSS で絶対位置を指定するには、このスタイルを設定する必要があります。
position:absolute;
left:0px;
z-index:10;
このスタイルを親に設定する必要があります
position:relative;
よろしくお願いします
私が理解していることは、jsfiddle を作成したことです。ご覧ください。これがあなたが探しているものか、他の何かです。
デモ
http://jsfiddle.net/saorabhkr/Xbydb/
jsfiddle を行の高さで更新しました。コンテンツの高さに関係なく、同じ行の高さを配置することをお勧めします。新しい jsfiddle をご覧ください。