Question

我试图制作一个延伸到浏览器右边缘的菜单，任何屏幕宽度。这就是我想要做的事情： http://imgur.com/EmMWLYd

我使用position: absolute;和width: 100%;让#greenbar延伸到#menu div之外。但它覆盖了宽度的所有菜单，而不仅仅是在右侧。

HTML：

<header id="nav">
        <h1><a href="#">Title</a></h1>
        <div id="menu">
            <ul>
                <li class="menu_button"><a>button1</a></li>
                <li class="menu_button"><a>button2</a></li>
                <li class="menu_button"><a>button3</a></li>
                <li class="menu_button"><a>button4</a></li>
                <li id="greenbar"></li>
            </ul>
        </div>        
</header>

CSS：

#menu{
    float: right;
    margin-top: 35px;
}

.menu_button{
    display: block;
    float: left;
    padding: 16px 25px;
    background-color: #39b54a;
    color: #fff;
    border-right: 1px solid #fff;
}

.menu_button:hover{
    background-color: #fff;
    color: #39b54a;
    -webkit-transition: background-color 300ms ease-in-out;
    -moz-transition: background-color 300ms ease-in-out;
    -o-transition: background-color 300ms ease-in-out;
    transition: background-color 300ms ease-in-out;
}

.menu_button a:hover{
}

.menu_button a{
    float: left;
    font-family: "Gotham";
    text-transform: uppercase;
}

#greenbar{
    float: right;
    padding: 24px;
    background-color: #39b54a;
}

Answer 1

据我所知，您可以使用padding-left，因此div不会到达屏幕左侧的边缘。

Answer 2

我不确定你为什么要使用绝对位置？这就是我要做的事情，减去过渡。

#nav {background:#39b54a;}
#nav:after,#menu> ul:after{content:''; display:block; visability:hidden;clear:both;}/*doesn't work in ie5 or 6*/
/*use clear:both; on the last element*/
#menu {float:right;}
#menu> ul> li {float:left;}

哪里有漂浮物。不要忘记清除它们。

Answer 3

我认为您正在尝试为横跨整个页面的导航栏添加背景颜色。如果是这种情况，请更新#menu，如下所示：

#menu{
    float: right;
    margin-top: 35px;
    width: 100%;
    background: #39b54a;
}

已更新：您可以将menu div包装在menu-wrapper中并创建左边距偏移：

<header id="nav">
        <h1><a href="#">Title</a></h1>
        <div id="menu-wrapper">
            <div id="menu">
                <ul>
                    <li class="menu_button"><a>button1</a></li>
                    <li class="menu_button"><a>button2</a></li>
                    <li class="menu_button"><a>button3</a></li>
                    <li class="menu_button"><a>button4</a></li>
                </ul>
            </div>     
        </div>
</header>

工作示例：http://jsfiddle.net/gkwpwwyg/1/

Answer 4

我不确定这对你有没有帮助，但我想是的。

使用table作为包装器，因此您可以定位它。

HTML：

<header id="nav">
 <table id="menu_table">
  <tr>
   <td class="menu_button">
    <a href="#" class="menu_a">button 1</a>
   </td>
   <td class="menu_button">
    <a href="#" class="menu_a">button 2</a>
   </td>
   <td class="menu_button">
    <a href="#" class="menu_a">button 3</a>
   </td>
   <td class="menu_button">
    <a href="#" class="menu_a">button 4</a>
   </td>
   <td id="greenbar">
    &nbsp;
   </td>
  </tr>
 </table>
</header>

CSS：

#menu_table {
    width: 80%;
    position: absolute;
    left: 20%; //make the table away from edge 20% of SCREEN
}

.menu_button{
    padding: 16px 25px;
    background-color: #39b54a;
    color: #fff;
    border-style: solid;
    border-color: #fff;
    border-width: 0px 1px 0px 0px; /*this will add space between button*/
    width: 20%; //width is 20% of table's width
    }

.menu_button:hover{
    background-color: #fff;
    color: #39b54a;
    -webkit-transition: background-color 300ms ease-in-out;
    -moz-transition: background-color 300ms ease-in-out;
    -o-transition: background-color 300ms ease-in-out;
    transition: background-color 300ms ease-in-out;
}

.menu_a {
    font-family: "Gotham";
    text-transform: uppercase;
}

#greenbar{
    width: 20%;
    padding: 24px;
    background-color: #39b54a;
    margin: 0px;
}

我是编码的新手。如果出现问题，请道歉。

Answer 5

好吧，我把它添加到我的#menu div：

position: absolute;
right: 0;
width: 50%;

菜单现在粘在屏幕的右边缘，然后我从#greenbar div中删除了float: right。

我的菜单现在占据屏幕的50％，绿色条纹延伸到边缘。

将div拉伸到屏幕边缘

5 个答案: