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

Answer 1

这是一个关于如何做到这一点的例子，将其添加到你的css：

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

这是一个小提琴：http://jsfiddle.net/b6tabykq/1/

如果你想删除空格，我不知道你想要什么，你应该删除你的＆lt; br＆gt;标签在HTML ..

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

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

1 个答案: