html - 如何将此文本移至顶部

Question

我有这个带有无序列表的导航，我将 li 显示为内联，问题来了，我在尝试向上对齐文本时遇到问题，显然，内联元素没有' t 采用 margin 和 padding 属性。

我的代码:

  <ul>
       <li><a href="#"><h3>Home</h3></a></li>
       <li><a href="#"><h3>About</h3></a></li>
       <li><a href="#"><h3>Contacr</h3></a></li>
       <li><a href="#"><h3>Blog</h3></a></li>
 </ul>

       ul{
            list-style: none;
	        max-width: 250px;
	        height: 40px;
	        background-color: #486348;
	        margin-top: 20px;
	        padding: 0;
	        padding-right: 10px;
	        padding-bottom: 10px;
	        padding-top: -10px;
      }

       li{
           display: inline-block;
	       height: 40px;
	       padding-bottom: 5px;
	       padding-left: 5px;
	       padding-right: 0;
	       border: 1px solid rgba(78,78,78,0.67);
        } 

      a {
           color: #fff;
	       text-decoration: none;
	       line-height: 1;
      }

      <ul>
           <li><a href="#"><h3>Home</h3></a></li>
           <li><a href="#"><h3>About</h3></a></li>
           <li><a href="#"><h3>Contacr</h3></a></li>
           <li><a href="#"><h3>Blog</h3></a></li>
     </ul>

虽然 line-height 为 1 确实对我有好处，但还不够，那么如何整齐地向上移动文本？

Answer 1

在你的样式表中添加 h3 { margin:0; }。 anchor 内的 h3 元素有一个默认的 margin 值。

此外，要在中间对齐文本(垂直对齐)，请添加 line-height: 40px; display:block; 用于 a 元素，因此它们具有与其父级 li 相同的 line-height。