Question

标题延伸100％罚款，但我似乎无法在保持下拉列表的同时拉伸导航栏。我的大部分解决方案都让导航栏变成了竖条，我不希望这样。任何帮助将不胜感激。

这是我的代码：

HTML

<header>
        <a href="index.html"><img src="http://i.imgur.com/cosDXx1.png"/></a>
</header> 

<nav>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
    <!-- First Tier Drop Down -->
    <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Brothers</a></li>
    </ul>        
    </li>
    <li><a href="#">Philanthropy</a>
    <!-- First Tier Drop Down -->
    <ul>
        <li><a href="#">Kovacs Walk</a></li>
        <li><a href="#">Greek God</a></li>
        <li><a href="#">Boys & Girls Club</a>
        <!-- Second Tier Drop Down -->
    </ul>
    </li>
    <li><a href="#">Membership</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

body {
    margin:0px;
    padding:0px;
}


header {
    height:105px;
    background-color:black;
    text-align:center;
}

header img{
    display:inline-block;
    margin-right:auto;
    margin-left:auto;
    margin-right:auto;
}
    nav {
        width:100%;
    }

    nav ul {
        padding:0;
        list-style: none;
        position: relative;
        display:block;
        float:left;
        clear:right;

        }

    nav ul li {
        display:list-item;
        list-style: none; 
        background-color:#64abfb;
        border-bottom:solid #2ecc71;
        float:left;
    }

    nav ul li a {
        display:block;
        padding:15px 10px;  
        color:#FFF;
        font-size:15px;
        text-decoration:none;
        font-family: 'Bree Serif', 'serif';
    }

    li a:hover { 
        background-color: #2ecc71;
        text-decoration:none; 
    }

    /* The Dropdown Styles */
    /* =================== */

    /* Hide Dropdowns by Default */
    nav ul ul {
        display: none;
        position: absolute; top: 58px;
    }

    /* Display Dropdowns on Hover */
    nav ul li:hover > ul {
        display:list-item;
    }

    /* Fisrt Tier Dropdown */
    nav ul ul li {
        width:170px;
        float:none;
        position: relative;
        border-bottom:none;
    }

这是一个小提琴：http://jsfiddle.net/5dukbrsp/

Answer 1

检查此fiddle

我已将nav ul和nav ul li宽度分别设为100％和16.66％。为什么16.66％，因为总宽度为100％并且您有6个列表项目要显示。所以100/6 = 16.66

希望你理解。

我已按照以下方式更改了您的CSS

header img {
    display:inline-block;
    margin-right:auto;
    margin-left:auto;
    margin-right:auto;
}
nav {
    width:100%;
    float:left;
}
nav ul {
    padding:0;
    list-style: none;
    position: relative;
    display:block;
    float:left;
    clear:right;
    width:100%;
}
nav ul li {
    width:16.66%;
    display:list-item;
    list-style: none;
    background-color:#64abfb;
    border-bottom:solid #2ecc71;
    float:left;
}
nav ul li a {
    display:block;
    padding:15px 10px;
    color:#FFF;
    font-size:15px;
    text-decoration:none;
    font-family:'Bree Serif', 'serif';
}
li a:hover {
    background-color: #2ecc71;
    text-decoration:none;
}
/* The Dropdown Styles */

/* =================== */

/* Hide Dropdowns by Default */
 nav ul ul {
    display: none;
    position: absolute;
    top: 58px;
}
/* Display Dropdowns on Hover */
 nav ul li:hover > ul {
    display:list-item;
}
/* Fisrt Tier Dropdown */
 nav ul ul li {
    width:170px;
    float:none;
    position: relative;
    border-bottom:none;
}

Answer 2

导航背景不会伸展，因为它没有背景！链接本身只有背景。在这个例子中，我已经改变了从浮点数水平显示链接到display: inline-block的方法。

Have an example (not centered)

Example with centered navigation使用nav ul { text-align: center; }

将背景放在导航栏上：

nav {
    width:100%;
    background-color:#64abfb;
}

将nav ul li显示更改为inline-block并移除浮动。

nav ul li {
    list-style: none; 
    background-color:#64abfb;
    border-bottom:solid #2ecc71;
    display: inline-block
}

更改top的值以修复下拉列表中的差距：

nav ul ul {
    display: none;
    position: absolute; 
    top: 50px;
}

完整的CSS

body {
    margin:0px;
    padding:0px;
}


header {
    height:105px;
    background-color:black;
    text-align:center;
}

header img{
    display:inline-block;
    margin: 0 auto;
}

nav {
  width:100%;
    background-color:#64abfb;
}

nav ul {
    padding:0;
    list-style: none;
    position: relative;
    display:block;
        font-size: 0;
        text-align: center;
    }

nav ul li {
    list-style: none; 
    background-color:#64abfb;
    border-bottom:solid #2ecc71;
        display: inline-block;
}

nav ul li a {
    display:block;
    padding:15px 10px;  
    color:#FFF;
    font-size:15px;
    text-decoration:none;
    font-family: 'Bree Serif', 'serif';
}

li a:hover { 
    background-color: #2ecc71;
    text-decoration:none; 
}

/* The Dropdown Styles */
/* =================== */

/* Hide Dropdowns by Default */
nav ul ul {
    display: none;
    position: absolute; top: 50px;
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:list-item;
}

/* First Tier Dropdown */
nav ul ul li {
    width:170px;
    float:none;
    position: relative;
    border-bottom:none;
    display: block;
    text-align: left;
}

无法让Nav Bar伸展100％

2 个答案:

检查此fiddle