2016-05-13 15 views
1

htmlとcssのみを使用してドロップダウンメニューを作成しました。ドロップダウンメニューをクリックすると、そのドロップダウンメニューが表示されます。ulまたはliのドロップダウンメニューの中央揃え

私のコードでは、これは紫色の部分を明るい青色の部分に合わせて配置します。私のコード - https://jsfiddle.net/92uhs075/

これについての提案はありますか?

私は<ul> display: tableを変更してから<li> float: leftに変更しました。マージンを(0の自動)と負の値に変更しましたが、何も私のために働いていないようです。

ご利用いただきありがとうございます。

+0

意味ですか?あなたの青い棒は画面の全長で、あなたの紫色もそうです。私はあなたがセンタリングすることによって何を意味するのか分かりません。 – haltersweb

+0

ウィンドウのサイズを大きくすると、紫色が青色より短いことがわかります。短くなると、紫色が青色の中央にくるようにしたいと思います。これは理にかなっていますか?ありがとう – Andrew

答えて

1

あなたのULは絶対的に正しいの50%への移行、それを配置して、戻ってそれを変換しているので、50%を残した:あなたがちょうど青以下の紫を望んでいることを

ul { 
    left: 50%; 
    transform: translateX(-50%); 
} 
+0

これは動作します!解決策をありがとうございました。私はそんなに長い間試してみることを試してみた。 – Andrew

+0

2番目の一見では、ulタグのコードを追加すると、最後の3つだけを表示するようにリスト項目が減少するようです。 5人全員に表示させる方法はありますか?私は幅や何かがこれらを背負っているかどうかを調べる。 – Andrew

+0

リスト項目は 'display:inline-block'なので、liの内容が折り返されないように、' white-space:nowrap; 'をurlに追加することもできます。 – haltersweb

関連する問題