UL/LI CSSコードでトップメニューが正しく表示されない

Question

divの代わりにulタグとliタグを使用しようとしたので、トップメニューを操作するとエラーが発生します。私は6つのliタグを持つulを持っています。それぞれのliタグに、それぞれの他のイメージと同じ次元を持つイメージを格納します。それぞれのliタグイメージは、ページの1/6の直下に水平に配置する必要があります。垂直方向は約100ピクセルです。私は現在、画像を正しく表示することができません。私が同じテストイメージを使用していても、すべての別々のタグは異なったレンダリングをしています。ここで

は私のCSS、HTML、およびImgurリンクに使用されている画像です：

HTML：http://pastebin.com/raw/EbyXvXEg

CSS：http://pastebin.com/raw/P8nkGHxN

Imgur：https://imgur.com/a/WF6Dd

私は得ることができません私が望むように機能するメニュー。中央のメニュー項目は、常に大きいまたは小さい画像を表示します。私はこれを働かせることはできません。誰かが私を少なくとも助けの方向に向けるのに役立つでしょうか？私はjsfiddleで動作するように画像を取得する方法がわかりません。そうでなければ投稿します。

Answer 1

タグの背景に写真を追加しようとしています。また、あなたのスタイリングをタグにすることもできます。

a { 
    width: 16.66%; 
    height: 100px; 
    display: block; 
    background: url(your image URL); 
    background-position: center; 
    background-size: cover; 
    background-repeat: none; 
} 

background-size：cover;コンテンツボックスがいっぱいになるまで画像を引き伸ばします。サイズの異なる画像を使用することもできます。