Question

我正在尝试为http://getbootstrap.com/examples/navbar-fixed-top/创建一个类似的菜单。看起来每个li元素都是它自己的框，具有宽度，高度和一些背景颜色（活动列表项的灰色）。我无法弄清楚如何在我自己的导航中执行此操作。我尝试将高度添加到列表项和一个元素，但这不会使它们与整个标题/导航内联。我不知道它是否因为我使用的像素混合了em或者是什么。我基本上希望每个li都是自己的盒子，其高度等于导航和一些任意值，以便当用户悬停link / list-item时可以应用背景颜色等... 。有什么想法吗？

    <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="David Espejo">
    <meta name="description" content="Providing small businesses and individuals websites using wordpress">
    <meta name="keywords" content="web,design,wordpress,HTML,CSS,PHP">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- for mobile devices -->
    <title>DEdesigns</title>
    <script src="html5shiv.js"></script>    <!-- allows html 5 styling -->
    <link rel="stylesheet" href="normalize.css"> <!-- a modern CSS reset -->
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
<div id="container">
    <header id="main-header">
        <h1>DEdesigns</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header> <!-- end #main-header -->
    <article id="about-me">
        <h1>About Me</h1>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but
                also the leap into electronic typesetting, remaining essentially unchanged
            </p>
            <figure>
                <img src="#" width="#" height="#">
                <figcaption>An image of myself</figcaption>
            </figure>
    </article> <!-- end #about-me -->
    <article id="gallery">
        <h1>My Work</h1>
        <div id="gallery-conatiner">
            <figure>
                <img src="#" width="#" height="#">
                <figcaption>SalonSociel website</figcaption>
            </figure>
            <p>
                A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
            </p>
            <!--  ends first row -->
            <p>
                A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
            </p>
             <figure>
                <img src="#" width="#" height="#">
                <figcaption>JJ and Sons Electric website</figcaption>
            </figure>
            <!-- ends second row -->
             <figure>
                <img src="#" width="#" height="#">
                <figcaption>Thetwoedgesword website</figcaption>
            </figure>
            <p>
                A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
            </p>
            <!-- ends third row -->
        </div> <!-- ends #gallery-container -->
    </article> <!-- end #gallery -->
    <article id="services">
        <h1>Services</h1>
         <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ol>
    </article> <!-- end #services -->
    <article id="contact-me">
        <h1>Contact Me</h1>
        <p>some contact me stuff goes here</p>
    </article> <!-- end #contact-me -->
    <footer>
        <p>This is my fotter</p>
    </footer>    
</div> <!-- end #container -->
</body>
</html>

CSS代码：

    #container {
    width: 100%;
    background: lightblue;
    border: 1px solid black;
    font-size: 1em;
}

#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: black;
    color: white;
}

#main-header h1 {
    float: left;
    margin: 5px 30px;
}

nav ul {
    padding-left: 0;
}

nav, nav ul li {
    display: inline-block;
}

nav {
    background: red;
    height: 50px;
}


nav ul li {
    border: 1px solid black;
}

nav a {

}

Answer 1

尝试以下方法：

nav ul {
  margin: 0;
  display: table;
  padding-left: 0;
}

nav a {
  display: table-cell;
  height: 50px;
  vertical-align: middle;
}

通过使用display: table和display: table-cell，您可以模拟表格，这样您就可以使用vertical-align: middle来垂直居中文字。

Fiddle

CSS固定导航

1 个答案: