Question

我的问题，真烦人 - 检查黑条：

enter image description here

尝试使黑色条横跨整个页面。有谁知道如何做到这一点？已经尝试了一段时间了。任何帮助表示赞赏。：d

我的代码：

    <div id="forum-header">
        <div class="container">
            <h2>Forum Tutorial</h2>
        </div>
    </div>
    <ul id="forum-navbar">
        <div class="container">
            <li><a href="http://www.mineforums.com">Home</a></li>
            <li><a href="http://www.mineforums.com/community/">Community</a></li>
            <li><a href="http://www.mineforums.com/purchase/">Purchase</a></li>
            <li><a href="http://www.mineforums.com/support/">Support</a></li>
        </div>
    </ul>

我的css：

body {
    margin: 0;  
}
.container {
    margin-right: auto;
    margin-left: auto;
}
#forum-wrapper {
    width: 960px;
    margin-left: auto;
    margin-right: auto; 
}
#forum-header {
    font-family: "Lato","Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #3B6C8E;
    padding: 5px 20px;
    width: 100%;
    color: #fff;
}
#forum-navbar {
    margin: 0;
    padding: 0;
    list-style: none;
}
#forum-navbar li {
    float: left;
    width: 150px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: #444;
}
#forum-navbar li a {
    color: #fff;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;  
}

Answer 1

问题是你已经将li设置为固定宽度，因此它们总共需要600px ....使其延伸到100％宽度，你必须使它们占据整个宽度。

另外，在clear:both之后使用ul清除float

并将其设为宽度的100％，指定li 25%宽度

fiddle demo

#forum-navbar li {
    float: left;
    width: 25%; /* add this */
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: #444;
}

或

将background: #444;替换为ul而不是li ..这也会使其延伸到整个宽度，而不会更改li的默认宽度

fiddle demo

Answer 2

为此你必须创建一个额外的DIV（id为“container-navbar”），如下所示

body {
    margin: 0;  
}
.container {
    margin-right: auto;
    margin-left: auto;
}
#forum-wrapper {
    width: 960px;
    margin-left: auto;
    margin-right: auto; 
}
#forum-header {
    font-family: "Lato","Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #3B6C8E;
    padding: 5px 20px;
    width: 100%;
    color: #fff;
}
#container-navbar {
    background: #444;
    width: 100%;
    height: 45px;
}
#forum-navbar {
    margin: 0;
    padding: 0;
    list-style: none;
}
#forum-navbar li {
    float: left;
    width: 150px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: #444;
}
#forum-navbar li a {
    color: #fff;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;  
}


<div id="forum-header">
    <div class="container">
        <h2>Forum Tutorial</h2>
    </div>
</div>
<div id="container-navbar">
    <ul id="forum-navbar">
        <li><a href="http://www.mineforums.com">Home</a></li>
        <li><a href="http://www.mineforums.com/community/">Community</a></li>
        <li><a href="http://www.mineforums.com/purchase/">Purchase</a></li>
        <li><a href="http://www.mineforums.com/support/">Support</a></li>
    </ul>
</div>

Answer 3

请找到工作解决方案@ http://jsfiddle.net/Midhun52/h95bttw0/

将ul移动到div并应用下面的样式

HTML

<div id="forum-header">
    <div class="container">
         <h2>Forum Tutorial</h2>

    </div>
</div>
<ul id="forum-navbar">
    <div class="container">
        <li><a href="http://www.mineforums.com">Home</a>
        </li>
        <li><a href="http://www.mineforums.com/community/">Community</a>
        </li>
        <li><a href="http://www.mineforums.com/purchase/">Purchase</a>
        </li>
        <li><a href="http://www.mineforums.com/support/">Support</a>
        </li>
    </div>
</ul>

<强> CSS

.mystyle{
   background-color: #444;
   height: 50px;
}

Answer 4

试试这个例子。在这个小提琴我修复了你的问题。

http://jsfiddle.net/Yunus_Aslam/bhs6meno/

我认为问题在于css

#forum-header

来吧，看看小提琴。

儿童div跨页面伸展

4 个答案: