画像とテキストを含むナビゲーションメニュー

Question

画像とテキストを内部に持つナビゲーションメニューを作成しようとしています。 最終結果は、左端とrighmost項目の縁なし、 ある

、アイテムが同じスペースを有していなければならない添付画像の一方と一致しなければなりません。

#container { 
 
    height: 200px; 
 
    text-align: justify; 
 
    border: 1px solid black; 
 
    font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */ 
 
    min-width: 960px; 
 
} 
 
#container div { 
 
    width: 220px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    
 
    text-align:center; 
 
} 
 
#container div img { 
 
\t background-color:#969; 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t position:relative; 
 
\t top:50px; 
 
\t 
 
} 
 
#container:after { 
 
    content: ''; 
 
    width: 100%; /* Ensures there are at least 2 lines of text, so justification works */ 
 
    display: inline-block; 
 
}

<div id="container"> 
 

 
\t <a href=""><div><img src='//placehold.it/100' /><br /><div class='txt'>Home</div></div></a> 
 
    <a href=""><div><img src='//placehold.it/100' /><br /><div class='txt'>Sezione Amministrazione di Condominio</div></div></a> 
 
    <a href=""><div><img src='//placehold.it/100' /><br /><div class='txt'>Log Out</div></div></a> 
 
    <a href=""><div><img src='//placehold.it/100' /><br /><div class='txt'>Chi siamo</div></div></a> 
 
    
 
</div>​

それは動作しません。 - - を：内部テキストが折り返されたとき、画像がもはや同じマージン距離を有する画像は、トップ から、私が書いたHTML部分を同じ距離を持っている必要があります上から。私もulとliタグを使ってみましたが、結果はさらに悪かったです... どこがエラーですか？ ありがとうございます。 サンディエゴ

Answer 1

は、私はこれは私がそれらを実行できるようにするために、あなたのCSSやHTMLスニペットを組み合わせてきたあなた

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#container { 
 
    height: 200px; 
 
    width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
#container > a { 
 
    width: calc(260px - 10px); 
 
    height: 200px; 
 
    margin-right: 10px; 
 
    text-align:center; 
 
    border: solid 1px green; 
 
    float: left; 
 
} 
 

 
#container > a:last-child { 
 
    width: 180px; 
 
    margin-right: 0; 
 
} 
 

 
#container > a > img { 
 
\t background-color:#969; 
 
\t width: 100px; 
 
\t height: 100px; 
 
    border: solid 1px red; 
 
    margin-top: 10px; 
 
} 
 

 
#container div.txt { 
 
    border: solid 1px orange; 
 
    padding: 0 20px; 
 
} 
 

 
#container:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
}

<div id="container"> 
 
    <a href=""> 
 
    <img src='img/gestione-amministratori-condominio.png' /> 
 
    <div class='txt'>Home</div> 
 
    </a> 
 
    <a href=""> 
 
    <img src='img/gestione-amministratori-condominio.png' /> 
 
    <div class='txt'>Sezione Amministrazione di Condominio</div> 
 
    </a> 
 
    <a href=""> 
 
    <img src='img/gestione-amministratori-condominio.png' /> 
 
    <div class='txt'>Log Out</div> 
 
    </a> 
 
    <a href=""> 
 
    <img src='img/gestione-amministratori-condominio.png' /> 
 
    <div class='txt'>Chi siamo</div> 
 
    </a> 
 
</div>