Question

如何在无序列表项中控制堆叠，居中和垂直的2个项目之间的垂直间距？这是导航菜单中无序列表项内文本链接顶部的glyphicon。

这种事情的CSS规则是什么。

    <!doctype html>
 <html lang="en-us">
 <meta charset="utf-8" />
 <link rel="stylesheet" type="text/css" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" title="style">

 <head>
 <style type="text/css">

/*

Adding display: inline-block; as a style attribute will display the content horizontally. Add that to the Nav's 

<li> elements in css. I'm guessing every <li> may have a glyph. Add text-align:center on the <li>'s within the 

nav in css to align the <li>'s content in the middle.  

*/


*{
margin:0; 
padding:0;
}

/* To target only one icon, */

.glyphicon.glyphicon-globe {
    padding:3px 0 0 0;
    margin: 0 0 -15px 0;
    font-size: 17px;
}


nav {
width: 100%; 
height:50px;
line-height:50px;
text-align:center;
background:#87e0fd;
color:#f00;

}


nav ul {
margin:0; 
padding:0;
width:100%;
line-height:50px;
height:auto;
list-style:none;
}


nav li {
display: inline-block;
width:110px;
height:50px;
text-align:center;
text-decoration: none;
padding:auto;
margin:0; 
border-left: solid 1px #999;
}

/* Puts border on right side of menu */

nav li:last-child {
border-right: solid 1px #999;
}



/* To target the Hover Action or Active you could write the css like below. */

nav li:hover {
text-decoration: none;
background:#3f4c6b;
color:#fff;
cursor:pointer;
}

nav li:active {
text-decoration: none;
margin: -15px 0 0 0;

} 


 </style>
  <title>My Glyphicon Menu /title>
 </head>
 <body>

  <nav>
    <ul>

      <li>
        <link href="#" title="HOME">
        <span class="glyphicon glyphicon-globe"></span><br>
        <span class="glyphicon-class">Home</span>
       </link>
      </li>


      <li>
        <link href="#" title="ABOUT">
        <span class="glyphicon glyphicon-globe"></span><br>
        <span class="glyphicon-class">about</span>
       </link>
      </li>


      <li>
        <link href="#" title="CONTACT">
        <span class="glyphicon glyphicon-globe"></span><br>
        <span class="glyphicon-class">Contact</span>
       </link>
      </li>


    </ul>
    </nav>


  <p>Hello World</p>

 </body>
</html>

控制无序列表中的glyphicon间距和文本链接

0 个答案: