Question

我想将此网站上图片左侧的导航栏（http://luucdev.de/workspace/smilex/）对齐到底部（边框上方）。

我怎样才能做到这一点？

我目前的HTML是：

<header class="site-header">
    <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
    <h5><?php bloginfo('description'); ?></h5>

    <img class="pull-right" src="<?php bloginfo('template_directory'); ?>/images/skins.png">

    <nav class="site-nav">
      <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
    </nav>
</header><!-- /site-header -->

我目前的CSS是：

/* Header */

.site-header {
  height: auto;
  border-bottom: 2px solid #999;
}

.site-header img {
  height: 200px;
}

/* Navigation */

.site-nav ul {
  margin: 0;
  padding: 0;
  *zoom: 1;
}

.site-nav ul:before, .site-nav ul:after {
  content: "";
  display: table;
}

.site-nav ul:after {
  clear: both;
}

.site-nav ul li {
  float: left;
  list-style: none;
}


/* Header Menu */

.site-header nav ul {
  padding-left: 20px;
}

.site-header nav ul li {
  margin-right: 5px;
}

.site-header nav ul li a:link,
.site-header nav ul li a:visited {
  display: block;
  padding: 10px 18px;
  border: 1px solid #bbb;
  border-bottom: none;
  text-decoration: none;
}

.site-header nav ul li a:hover {
  background-color: #ececec;
}

.site-header nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited {
  background-color: #006ec3;
  color: #fff;
  border-bottom: 2px solid #fff;
}

Answer 1

您可以尝试在包含div和ul元素上使用相对和绝对定位。

CSS将是这样的：

.menu-menue-container {
  position: relative;
  height: 200px;
}

.menu-menue-container ul {
  position: absolute;
  bottom: 0;
}

它不是最好的方式，但它会为你完成工作。

Answer 2

只需缩短将菜单项保持为LI高度的UL元素的高度，并添加margin-top以匹配图像高度。我玩了一下，这应该足够接近（你可以尝试向上或向下添加几个像素）：

ul{
  height: 40px; // instead of 200px
  margin-top: 180px;
  // rest of old style
}

使用nav将图像定位在底部内联

2 个答案: