将 Initializr 模板中的导航按钮与导航栏底部对齐答案

【问题标题】：Align navigation buttons in Initializr template to bottom of navigation bar将 Initializr 模板中的导航按钮与导航栏底部对齐
【发布时间】：2012-10-20 08:48:02
【问题描述】：

我的网站基于Initializr 引导模板。我使用的是图像，而不是左上角的“项目名称”。导航链接仍然与页面顶部对齐，但我希望它们位于黑色导航栏的底部：

要重现最简单的方法是下载 Bootstrap 模板，并将导航栏中的“项目名称”更改为：

<a class="brand" href="#"><img src="apple-touch-icon-114x114-precomposed.png" /></a>

我一辈子都无法让链接在导航栏底部对齐，除非在bootstrap.css（.min.css）中设置.navbar .nav 样式，上边距约为90px。然而，这种（基于像素的）解决方案感觉像是一种错误的方法。

我尝试过使用position: relative; bottom: 0 和vertical-align: bottom，但无济于事。这些模板中的 CSS 数量也无济于事（尤其是对于像我这样的开发者而非设计师）。

谁能让链接整齐地对齐到导航栏的底部？

【问题讨论】：

标签： css html initializr

【解决方案1】：

如果自己通过放弃 Initializr（对我需要的功能来说太强大）并使用以下结构来修复它：

<div id="container">
    <div class="navbar">
        <a href="index.html" class="logo">
            <img src="img/logo.png" />
        </a>
        <div class="nav">
            <ul>
                <li><a href="page1.html">Page 1</a></li>
                <li><a href="page2.html">Page 2</a></li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div class="content">
        Content here
    </div>
</div>

还有以下 CSS：

#container { width: 1170px; margin: 0 auto; }
.navbar, .content { font-size: 1.6em; }
.navbar .logo { float: left; }
div.nav ul { list-style: none;padding: 0;}
div.nav ul li { display: inline;}
div.nav ul li a { display: block; background-image: url('../img/linksBackground.png'); background-position: 0 80px; background-repeat: no-repeat;
margin-top: 115px; float: left; padding: 11px 30px 9px 30px; text-decoration: none; color: #5dd2ff; }
div.nav ul li a:hover {color: #fff; background-position: 0 160px; background-color: #95e2ff;}
div.nav ul li.active a { color: #fff;font-weight: bold; background-position: left top; background-color: #5dd2ff;}

.clear { clear: both; }

【讨论】：