Question

我已经找到了一些与我有同样问题的线程，但是他们没有帮助我。当我放大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;
}

有人能帮助我吗？

非常感谢！

Answer 1

尝试使用带有display：table和display：table-cell。

的div

<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

Answer 2

放大和缩小时，它看起来像是一个舍入/比率问题。（25％）

当你放大或缩小时，你会遇到问题因为舍入和文本呈现。确保这个是个好主意布局可以在不打破的情况下经受住一段时间的延伸。
相对定位受到＃1中提到的问题的影响因此不可靠。
考虑使用某些东西来删除各种属性浏览器将适用。您可以使用重置来为您提供一些东西更可行或尝试将值标准化以使它们更均匀浏览器之间。

通过更改CSS文件中的以下行（li，ul）将解决Firefox，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;
}

Chrome中较小（ul宽度设置为css中的822px）

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

导航通过缩放中断

2 个答案: