將div伸展到屏幕的邊緣

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格在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

我不確定這可以幫助你，但我認爲是。

使用表格作爲包裝，以便您可以定位它。

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％，並且綠條延伸到邊緣。