使用導航底部內嵌定位圖像

我想將導航欄與本網站上圖像的左側（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; 
}

來源

2015-04-01 LuucDev

在計算器所有的一切，但是有些事情我不明白。你知道一個解決方案嗎？ – LuucDev 2015-04-01 19:36:14

您給出的鏈接在圖像的左側有一個導航菜單。我不確定你想要什麼，但在設計細節方面是相當重要的，特別是當你已經看到了你要求的結果時。 – leigero 2015-04-01 19:47:07

你可以嘗試使用上含有div和ul要素相對和絕對定位。

的CSS將沿着這些路線的東西：

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

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

它不是最好的方式，但它會完成任務爲你做。

來源

2015-04-01 19:40:35 Stewartside

只需縮短UL元素的高度，即將菜單項目保持爲LI高度並添加邊距以匹配圖像高度。我打了一下，這應該是足夠接近（你可以嘗試添加幾個像素向上或向下）：

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

來源

2015-04-01 19:46:59 Zivko

使用導航底部內嵌定位圖像

回答

相關問題