CSS 固定导航答案

【问题标题】：CSS fixed navigationCSS 固定导航
【发布时间】：2014-12-11 03:16:36
【问题描述】：

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

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

}

【问题讨论】：

将 nav ul li a{display:block; padding: 5px 10px;} 添加到您的 CSS 中，为您的导航链接提供一些高度/宽度。
我不想使用 display: block;因为我希望它们内联。此外，当我添加填充时，主页关于联系人等 .. 不再与网站名称/徽标内联，它们位于其下方。
示例：jsfiddle.net/zjsvc5ed

标签： html css web

【解决方案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

【讨论】：

哇，成功了，谢谢。我怎么会自己想出来呢？看起来有点像黑客，你不会说。
是的，你是对的，桌子的东西有点像黑客。一年前，我可能也不知道:)