时间戳

首页 > 解决方案 > 向上垂直对齐菜单元素

html - 向上垂直对齐菜单元素

问题描述

我正在尝试将 2 个菜单元素（服务和关于）向上对齐，但我不能。你知道如何将它们垂直对齐吗？

ul#menu {
  background-color: #f8f8f8;
  display: table-row;
}

ul#menu li {
  display: table-cell;
  /*   height: 30px;  */
  width: 100px;
  padding-left: 5px;
  vertical-align: bottom;
  /*   border-right: 1px solid #ccc;    */
}

ul#menu li.elements {
  height: 10px;
  /* margin-bottom: 45px; */
}

ul#menu li:last-child {
  border-right: 0px;
}
<ul id="menu">
  <li style="height:40px;">
    <a href="../index.php"><img src="./bilder/logo2.jpg" alt="Start"></a>
  </li>
  <li class="elements">Services</li>
  <li class="elements">About</li>
</ul>

标签： htmlcss

解决方案

根据您的代码，只需从下到上替换垂直对齐，它就会起作用......

ul#menu {
    background-color: #f8f8f8;
    display: table-row;   
}

ul#menu li {
    display: table-cell;
 /*   height: 30px;  */
    width: 100px;
    padding-left: 5px;
    vertical-align: top;   
 /*   border-right: 1px solid #ccc;    */ 
}

ul#menu li.elements
 {
 height: 10px;
 /* margin-bottom: 45px; */ 
}

ul#menu li:last-child {
    border-right: 0px;    
}
<ul id="menu">
    <li style="height:40px;"><a href="../index.php"><img src="./bilder/logo2.jpg" alt="Start"></a></li>
    <li class="elements">Services</li>
    <li class="elements">About</li>
</ul>

笔记：

  1. 我更喜欢使用填充网在每个地方放置一个静态高度..
  2. 如果您需要这些服务并且只是在上面，只需将垂直 algin 移动到带有顶部的 ul#menu li.elements 并保持 ul#menu li 原样......
  3. 你可以减少选择器的级别，不需要写ul#menu alawyes，你可以只写#menu...
  4. 我更喜欢阅读关于 flex 的内容并尝试使用嵌套表格行和表格单元格的 flex 样式编写菜单

推荐阅读