带图像和文本的导航菜单

Question

我正在尝试构建一个必须包含图像和文本的导航菜单。 最终结果必须与附图中的结果相匹配

也就是说，项目必须具有相等的空间，最左边和最右边的项目没有边距。图像必须与顶部具有相同的距离 我写的html部分： -

＆＃13;

＆＃13;

#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 {
	background-color:#969;
	width: 100px;
	height: 100px;
	position:relative;
	top:50px;
	
}
#container:after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}

＆＃13;

<div id="container">

	<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>​

＆＃13;

＆＃13;

＆＃13;

它不起作用： - 当包裹内部文本时，图像与顶部的边距不再相同。我也试过使用ul和li标签但结果更糟糕...... 错误在哪里？ 提前致谢。 迪戈

Answer 1

尝试继续前进，我希望这会对你有所帮助

＆＃13;

＆＃13;

* {
  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 {
	background-color:#969;
	width: 100px;
	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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;