Question

我对我正在制作的菜单有疑问，我希望它类似于：

<icon>       <icon>       <icon>
Title        Longer        Title 
             Title

现在我有这样的话：

           <icon>       
  <icon>   longer   <icon> 
  Title    Title    Title

我使用这样的列表制作了菜单（从实际代码中复制）

      <ul>
          <li>
             <a href="#"><img src="images/buton1.png" class="butonmeniu"><h2 class="meniufont" >Info utile</h2></a>   
          </li>
       </ul>

和css样式是这样的

.meniufont{
font-family:'Open Sans', sans-serif;
font-size:15px;
margin-right:10px;
text-align: center;
font-weight:normal;
color:#434446;
}
.butonmeniu{
display:block;
}

非常感谢，如果您有任何疑问，请询问。谢谢。

Answer 1

li {
  display: table-cell;
  vertical-align: top;
  width: 90px;
  padding: 5px;
  }

      <ul>
          <li>
             <a href="#"><img src="http://placephant.com/80/80" class="butonmeniu"><h2 class="meniufont" >Info utile</h2></a>   
          </li>
          <li>
             <a href="#"><img src="http://placephant.com/80/80" class="butonmeniu"><h2 class="meniufont" >Info utile Into utile</h2></a>   
          </li>
       </ul>

Answer 2

您的li正在使用display:inline-block

将vertical-align:top添加到li，默认为baseline。

＆＃13;

.meniufont {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
   font-weight: normal;
  color: #434446;
}
.butonmeniu {
  display: block;
}
li {
  display: inline-block;
  text-align: center;
  margin: 0 10px;
  vertical-align: top;
}

＆＃13;

<div class="menu">
  <ul>
    <li>
      <a href="#">
        <img src="http://www.fillmurray.com/g/20/20" class="butonmeniu">
        <h2 class="meniufont">Title</h2>
      </a>
    </li>

    <li>
      <a href="#">
        <img src="http://www.fillmurray.com/g/20/20">
        <h2 class="meniufont textjos">Longer <br>Title</h2>
      </a>
    </li>

    <li>
      <a href="#">
        <img src="http://www.fillmurray.com/g/20/20">
        <h2 class="meniufont">Title</h2>
      </a>
    </li>
  </ul>
  </div>

＆＃13;

Answer 3

燮！

我玩弄了我认为你想要达到的目标。

请参阅此笔：Codepen Link

＆＃13;

#nav { list-style : none;}

.nav-item {
  display: inline-block;
  width: 100px; /* Make it whatever you want */
}
.meniufont{
font-family:'Open Sans', sans-serif;
font-size:15px;
margin-right:10px;
text-align: center;
font-weight:normal;
color:#434446;
}
.butonmeniu{
display:block;
margin: auto;
width: 100%;
}

＆＃13;

  <ul id="nav">
      <li class="nav-item">
         <a href="#">
           <img src="http://placehold.it/350x150" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
        </a>   
      </li>
    <li class="nav-item">
         <a href="#">
           <img src="http://placehold.it/350x150" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
        </a>   
      </li>
    <li class="nav-item">
         <a href="#">
           <img src="http://placehold.it/350x150" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
        </a>   
      </li>
   </ul>

＆＃13;

在图标下排列文字

3 个答案: