導航突破縮放

我已經發現一些線程與我有同樣的問題，但他們沒有幫助我。當我放大25％時，我最後一個導航按鈕在下一行中斷。導航突破縮放

這是我的代碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 

<div id="menu"> 
    <nav> 
     <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
      <li><a href="#">Link 5</a></li> 
      <li><a href="#">Link 6</a></li> 
     </ul> 
    </nav> 
</div> 

</body> 
</html> 

    body 
{ 
    background-color: #000000; 
    margin: 0; 
} 

li 
{ 
    float: left; 
    background-color: #FFFFFF; 
    list-style: none; 
    background-color: #00514C; 
    font-weight: bold; 
    font-family: "Calibri"; 
    width: 160.8px; 
    text-align: center; 
    display: inline; 
    line-height: 30px; 
    border-right: 2px solid #FFFFFF; 
} 

li a 
{ 
    color: #FFFFFF; 
    text-decoration: none; 
    display: block; 
    line-height: 
} 

li:hover 
{ 
    background-color: #C0C0C0; 
} 

li:last-child 
{ 
    border-right: none; 
} 

ul 
{ 
    position: relative; 
    margin-left: -40px; 
} 

#menu 
{ 
    position: relative; 
    width: 975px; 
    height: 30px; 
    margin: 0 auto; 
}

有人能幫助我嗎？

非常感謝！

來源

2013-10-11 user2871190

它看起來就像是當你放大和縮小舍入/比率問題。（25％）

放大或縮小時，由於四捨五入和文本呈現，您將遇到問題。確保佈局可以在不中斷的情況下繼續延伸，這是一個好主意。
相對定位受＃1中提及的問題影響，因此不可靠。
研究使用某些東西來刪除各種瀏覽器將應用的屬性。您可以使用重置功能爲您提供更多可行的功能，或者嘗試對這些值進行規範化處理，以使它們在瀏覽器之間更加均勻，即使是。

通過更改CSS文件（L1，UL）以下線路將解決火狐，Chrome等
改變寬度的問題：135px和添加保證金：2px的

li 
{ 
    float: left; 
    background-color: #FFFFFF; 
    list-style: none; 
    background-color: #00514C; 
    font-weight: bold; 
    font-family: "Calibri"; 
    width: 135px; 
    margin: 2px; 
    text-align: center; 
    display: inline-block; 
    line-height: 30px; 
    border-right: 2px solid #FFFFFF; 
}

在

較小鉻（ul寬度設置爲822px的CSS）

ul 
{ 
    width: 822; 
    margin-left: -40px; 
    position: relative; 
}

來源

2013-10-12 01:06:01 Jocelyn

謝謝你的幫助！ – user2871190

嘗試使用帶顯示的div：table和display：table-cell。

<div id="menu"> 
<nav> 
    <div class="box"> 
     <div><a href="#">Link 1</a></div> 
     <div><a href="#">Link 2</a></div> 
     <div><a href="#">Link 3</a></div> 
     <div><a href="#">Link 4</a></div> 
     <div><a href="#">Link 5</a></div> 
     <div><a href="#">Link 6</a></div> 
    </div> 
</nav> 
</div> 

body 
{ 
background-color: #000000; 
margin: 0; 
} 

.box div 
{ 
display: table-cell; 
background-color: #FFFFFF; 
background-color: #00514C; 
font-weight: bold; 
font-family: "Calibri"; 
text-align: center; 
line-height: 30px; 
border-right: 2px solid #FFFFFF; 
} 

a 
{ 
color: #FFFFFF; 
text-decoration: none; 
display: block; 
line-height: 
} 

.box div:hover 
{ 
background-color: #C0C0C0; 
} 

.box div:last-child 
{ 
border-right: none; 
} 

.box 
{ 
display: table; 
width: 100%; 
} 

#menu 
{ 
position: relative; 
width: 975px; 
height: 30px; 
margin: 0 auto; 
}

jsfiddle

來源

2013-10-11 14:01:19

謝謝你的幫助。我用「display：block」來實現，可以在任何地方點擊導航。 Withouth，我不得不點擊鏈接。有沒有辦法避免這種情況？ – user2871190

我沒有改變顯示：塊;在'a'標籤上，你仍然可以做到這一點，如果你不想要它只是刪除顯示：塊;或將其更改爲顯示：inline-block ;.我不確定這是不是你問的問題。 –

非常感謝，我可以解決我的問題。 – user2871190

導航突破縮放

回答

相關問題