CSS阻止菜單改變位置

有人問我如何改進他的CSS以防止導航菜單在瀏覽器變小時改變位置，但我無法弄清楚爲什麼它不起作用。見的jsfiddle：http://jsfiddle.net/gtvTY/10/CSS阻止菜單改變位置

的HTML：

<div id="menu"> 
    <ul> 
     <li><a href="index.html" title="Home">HOME</a></li> 
     <li><a href="virage.html" title="Virage">VIRAGE</a></li> 
     <li><a href="rapide.html" title="Rapide">RAPIDE</a></li> 
     <li><a href="dbs.html" title="DBS">DBS</a></li> 
     <li><a href="db9.html" title="DB9">DB9</a></li> 
     <li><a href="cygnet.html" title="Cygnet">CYGNET</a></li> 
    </ul> 
</div>

這是原來的菜單：

 ul.menu { 
     position:absolute; 
     left:18%; 
     right:18%; 
     background: #333; 
     float: left; 
     list-style: none; 
     margin: 0; 
     padding: 0; 
     width: 64%; 
     z-index: 3; 
    } 
    ul.menu li { 
     float: left; 
     margin: 0; 
     padding: 0; 
    } 
    ul.menu a { 
     background: #333; 
     color: #ccc; 
     display: block; 
     float: left; 
     margin: 0; 
     padding: 8px 12px; 
     text-decoration: none; 
    } 
    ul.menu a:hover { 
     background: #666; 
     color: #fff; 
     padding-bottom: 8px; 
    }

我重新設計了它一下這個。但它根本不起作用...

#menu ul { 
     position: absolute; 
     list-style: none; 
     padding: 0; 
     margin: 0; 
    } 

    #menu li 
    { 
     float: left; 
     margin: 0 0.15em; 
    } 

    #menu li a 
    { 
     background-color: #333; 
     height: 2em; 
     line-height: 2em; 
     float: left; 
     width: 9em; 
     display: block; 
     color: #fff; 
     text-decoration: none; 
     text-align: center; 
    } 

    #menu ul a:hover { 
     background: #666; 
     color: #fff; 
     padding-bottom: 2px; 
    }

爲什麼這個菜單不能始終居中？

來源

2012-12-18 Forza

請考慮搭建一個例子網站如http://jsfiddle.net –

絕對定位。如果你想中心它，你應該給菜單一個固定的寬度，並使用'margin：0 auto;'你也發佈了原始和你的改進版本相同的代碼... – Jrod

其餘的代碼在哪裏？我們需要的不僅僅是CSS。添加HTML，如果你很好，也可以添加一個jsfiddle。 – MiniRagnarok

也許是這樣的，你正在尋找 - 在評論

來源

2012-12-18 18:48:14 daniel

http://jsfiddle.net/gtvTY/6/ – daniel

好的，謝謝，這個解決方案將菜單放在中心位置，它不會在移動時調整窗口的大小;）唯一的事情是..當我將鼠標懸停在菜單項上時，它什麼都不做。瀏覽器不會將它們視爲鏈接。當我使用position：absolute時，我只能得到懸停函數，但是這會破壞你的整個設計:(任何想法？ – Forza

哪個瀏覽器？ – daniel

的jsfiddle你需要把菜單中的包裝容器。給它一個寬度並設置邊距：0 auto;

見小提琴這裏：http://jsfiddle.net/AndrewHenderson/gtvTY/7/

HTML：

<div class="container"> 
    <div id="menu"> 
     <ul> 
      <li><a href="index.html" title="Home">HOME</a></li> 
      <li><a href="virage.html" title="Virage">VIRAGE</a></li> 
      <li><a href="rapide.html" title="Rapide">RAPIDE</a></li> 
      <li><a href="dbs.html" title="DBS">DBS</a></li> 
      <li><a href="db9.html" title="DB9">DB9</a></li> 
      <li><a href="cygnet.html" title="Cygnet">CYGNET</a></li> 
     </ul> 
    </div>  
</div>

CSS：

.container{ 
    margin: 0 auto; 
    width: 800px; 
}

來源

2012-12-18 18:57:50 AndrewHenderson

我看不出這與現在已有的不同。檢查我的jsFiddle中的html和css。 – Forza

看來你已經改變了你提供的jsFiddle鏈接。我評論了http://jsfiddle.net/gtvTY/。您現在鏈接到http://jsfiddle.net/gtvTY/10/。請保持每個人都知道你的更新，否則我們都在看不同的小提琴。根據答覆，我認爲這個問題需要進一步澄清。我不確定你想用這段代碼發生什麼。 – AndrewHenderson

這是你想要的嗎？ jsfiddle

菜單坎特在bowoser對齊。
菜單項不會進入第二行。

如果是這樣的解決方案是

你必須使用的位置是：相對的;而不是位置：絕對;

<div class="center"> 
<div id="menu"> 
    <ul> 
     <li><a href="index.html" title="Home">HOME</a></li> 
     <li><a href="virage.html" title="Virage">VIRAGE</a></li> 
     <li><a href="rapide.html" title="Rapide">RAPIDE</a></li> 
     <li><a href="dbs.html" title="DBS">DBS</a></li> 
     <li><a href="db9.html" title="DB9">DB9</a></li> 
     <li><a href="cygnet.html" title="Cygnet">CYGNET</a></li> 
    </ul> 
</div>

，並定義一個寬度你的菜單CSS

.center 
{ 
width:auto; 
} 
#menu 
{ 
width:900px; 
margin:0 auto; 
position:relative; 

} 
#menu ul { 
     list-style: none; 
     padding: 0; 
     margin: 0; 
    } 

    #menu li { 
     float: left; 
     margin: 0 0.15em; 
    } 

    #menu li a { 
     background-color: #333; 
     height: 2em; 
     line-height: 2em; 
     float: left; 
     width: 9em; 
     display: block; 
     color: #fff; 
     text-decoration: none; 
     text-align: center; 
    } 

    #menu ul a:hover { 
     background: #666; 
     color: #fff; 
     padding-bottom: 2px; 
    }

來源

2012-12-18 19:03:20

CSS阻止菜單改變位置

回答

相關問題