問題タブ [css]

HTMLのメニューバーに関するチュートリアルはたくさんありますが、この特定の（私見では一般的ですが）ケースでは、まともな解決策が見つかりませんでした：

• さまざまな数のテキストのみのメニュー項目があり、ページ レイアウトは流動的です。
• 最初のメニュー項目は左揃えにし、最後のメニュー項目は右揃えにする必要があります。
• 残りの項目は、メニュー バーに最適に配置する必要があります。
• 数は変動するため、最適な幅を事前に計算する機会はありません。

ここでも TABLE は機能しないことに注意してください。

• すべての TD を中央に配置すると、最初と最後のアイテムが正しく配置されません。
• 最初の応答を左揃えと右揃えにした場合。最後の項目では、間隔は最適ではありません。

HTML と CSS を使用してこれをクリーンな方法で実装する明白な方法がないのは奇妙ではありませんか?

ナビゲーションの「ブレッドクラム」のインスピレーションやデザイン パターンのソースを探しています。これまでのところ、Pattern Tap でブレッドクラム コレクションを見つけました。他の情報源を知っている人はいますか？

画像 ( <img>) を ( でラップして) ハイパーリンクにすると<a>、Firefox は画像の周りに黒い境界線を追加します。Safari は同じ境界線を表示しません。

境界線をなくすには、どの CSS 宣言が最適でしょうか?

私のコードがうまくいかないのか、それともブラウザーがまだ仕様に追いついていないだけなのかはわかりません。

私の目標は、生成されたコンテンツを使用してリスト マーカーをシミュレートし、純粋な CSS でリストからリストへのカウンターの継続などを取得することです。

したがって、仕様に従って正しいと思われる以下のコードは次のようになります。

しかし、これは FF3、Chrome、または IE8 beta 2 のいずれかでマーカーを生成しないようです。正しく思い出せば、Opera も生成しません (ただし、Opera をアンインストールしてからです)。

それで、マーカーが機能するはずかどうかは誰にもわかりませんか？Quirksmode.org は、この点に関していつものように役に立ちません :(.

フロートを使用してコンテンツのさまざまなセクションを表示する、非常に高速に作成したサイトがあります。フロートされたコンテンツと追加のマージンがあるコンテンツはどちらもFF/IEで正常に表示されますが、サファリではdivの1つが完全に非表示になっています。paddingとに切り替えてみましposition:relativeたが、何も機能しませんでした。コードを取り出して右側に表示すると、再び表示されますが、フロートされたコンテンツの下に表示されます。

問題を引き起こしていると思われるcssの主なセクションは次のとおりです。

これにより、＃settings divにサイズを指定してもしなくても、同じ結果が得られます。任意のアイデアをいただければ幸いです。

ソースコードを確認するには、 http： //frickinsweet.com/tools/Theme.mvc.aspxでサイトを利用できます。

私はCSS smartyになれたらいいのに....

Web ページの左下隅に div コンテナを配置するにはどうすればよいですか。ユーザーのスクロール位置を考慮していますか?

Googleは、 Google FinanceのURLの[見積もりを取得]検索ボックスの提案ドロップダウンの2番目の列（つまり、ティッカー名）を適切に配置する方法を教えてください。

例：次のように入力するiiiと、2番目の列は完全に整列します。

固定幅フォントを使用しないため、ティッカーに正しい数のスペースを追加するだけでは機能しません。

彼らはどのようにそれをしますか？

CSS（特に色）で値を再利用することは、そのCSSを維持することになると私にとって常に問題でした。変数を作成するため、または一般的にCSSで保守性を向上させるための最良のツールは何ですか？

次のようなリストがあるとします。

• アイテム1
• アイテム2
• アイテム3

リストの最後の項目を直接選択できる CSS セレクターはありますか? この場合、項目 3.

乾杯！

（以降、「テキストボックス」と呼びます）を に設定して<input type="text">、親コンテナを埋めようとしています。これは、テキストボックスにパディングを与えるまで機能します。これがコンテンツの幅に追加され、入力フィールドがオーバーフローします。Firefox では、これはコンテンツを標準に準拠してレンダリングする場合にのみ発生することに注意してください。quirks モードでは、別のボックス モデルが適用されるようです。width100%

最新のすべてのブラウザーで動作を再現するための最小限のコードを次に示します。

私の質問:テキストボックスをコンテナに合わせるにはどうすればよいですか?

注意: の場合<div id="y">、これは簡単です: 単純に設定しwidth: autoます。ただし、テキストボックスに対してこれを実行しようとすると、効果が異なり、テキストボックスはデフォルトの行数を幅として使用します(display: blockテキストボックスに設定しても)。

編集: David のソリューションはもちろん機能します。ただし、HTML を変更したくはありません。特に、セマンティック機能のないダミー要素を追加したくありません。これは、私が絶対に避けたいディビティスの典型的なケースです。これは最後の手段のハックにすぎません。