CSS固定菜單 - 如何不在容器外運行？

Question

如何修復容器內的菜單而無需在容器外運行？

我的代碼：

body {margin:0;} 
 

 
    ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
     position: fixed; 
 
     top: 0; 
 
     width: 100%; 
 
    } 
 

 
    li { 
 
     float: left; 
 
    } 
 

 
    li a { 
 
     display: block; 
 
     color: white; 
 
     padding: 16px; 
 
     text-decoration: none; 
 
    } 
 

 
    .container { 
 
     border: 1px solid red;  
 
     width: 500px; 
 
     margin: 0 auto; 
 
    }

<div class="container"> 
 

 

 
    <ul> 
 
     <li><a href="#home">Home</a></li> 
 
     <li><a href="#news">News</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 

 
    <div class="content"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
    </div> 
 
</div>

任何想法和建議？

Answer 1

在CSS代碼，更改

寬度：100％;

到

寬度：繼承;

body {margin:0;} 
 

 
    ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
     position: fixed; 
 
     top: 0; 
 
     width: inherit; 
 
    } 
 

 
    li { 
 
     float: left; 
 
    } 
 

 
    li a { 
 
     display: block; 
 
     color: white; 
 
     padding: 16px; 
 
     text-decoration: none; 
 
    } 
 

 
    .container { 
 
     border: 1px solid red;  
 
     width: 500px; 
 
     margin: 0 auto; 
 
    }

<div class="container"> 
 

 

 
    <ul> 
 
     <li><a href="#home">Home</a></li> 
 
     <li><a href="#news">News</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 

 
    <div class="content"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
    </div> 
 
</div>

希望它可以幫助

Answer 2

position: fixed位置相對於窗口的容器，無論它位於何處在DOM元素。因此，在這種情況下，你可能只是風格的菜單選擇（ul）來匹配.container的界限：

ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #333; 
     position: fixed; 
     top: 0; 
     width: 100%; 
     // container's style 
     width:500px; 
     margin: 0 auto 
    } 

Answer 3

簡單的解決辦法是添加max-width: 500px到UL標籤。 寬度100％將相對於身體，因爲display:fixed告訴渲染引擎ul-tag是相對於文檔;忽略容器的寬度

body {margin:0;} 
 

 
    ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
     position: fixed; 
 
     max-width:500px; 
 
     top: 0; 
 
     width: 100%; 
 
    } 
 

 
    li { 
 
     float: left; 
 
    } 
 

 
    li a { 
 
     display: block; 
 
     color: white; 
 
     padding: 16px; 
 
     text-decoration: none; 
 
    } 
 

 
    .container { 
 
     border: 1px solid red;  
 
     width: 500px; 
 
     margin: 0 auto; 
 
    }

<div class="container"> 
 

 

 
    <ul> 
 
     <li><a href="#home">Home</a></li> 
 
     <li><a href="#news">News</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 

 
    <div class="content"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
    </div> 
 
</div>

Answer 4

嘗試：

1：position:absolute更換display:fixed。

2：更換UL width:100%與width:inherit

在Firefox爲我工作。

body {margin:0;} 
 

 
    ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
     position: absolute; 
 
     top: 0; 
 
     width: inherit; 
 
    } 
 

 
    li { 
 
     float: left; 
 
    } 
 

 
    li a { 
 
     display: block; 
 
     color: white; 
 
     padding: 16px; 
 
     text-decoration: none; 
 
    } 
 

 
    .container { 
 
     border: 1px solid red;  
 
     width: 500px; 
 
     margin: 0 auto; 
 
    }

<div class="container"> 
 

 

 
    <ul> 
 
     <li><a href="#home">Home</a></li> 
 
     <li><a href="#news">News</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 

 
    <div class="content"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
    </div> 
 
</div>