在水平导航菜单的无序列表中控制字形间距和文本链接

如何控制在无序列表项中堆叠、居中和垂直的2项之间的垂直间距?这是我的导航菜单中无序列表项的文本链接顶部的一个象形符号。

发生这种事情的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 Navigation 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>

这是一个如何做到这一点的例子，通过添加到你的css:

/* Adding margin between glyphicon and text */
.glyphicon-class {
    display:block;
    margin-top:50px;    
}

这里是小提琴:http://jsfiddle.net/b6tabykq/1/

如果你想删除空格，我不知道你想要什么，你应该删除<标签在html..>

小提琴:http://jsfiddle.net/b6tabykq/2/

相关内容

最新更新

热门标签：