Question

我有无序列表的导航，我将li显示为内联，问题是，我在尝试向上对齐文本时遇到问题，显然，内联元素不会出现问题取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>

＆＃13;

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

＆＃13;

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

＆＃13;

虽然行高1确实对我有好处，但还不够，所以如何整齐地向上移动文字？

Answer 1

在样式表中添加h3 { margin:0; }。锚点内的h3元素具有默认的margin值。

此外，要在中间对齐文字（垂直对齐），请为line-height: 40px; display:block;元素添加a，以便它们与其父line-height具有相同的li

如何将此文字移至顶部

1 个答案: