0

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

有谁能够帮助我？

非常感谢！

4

2 回答 2

0

尝试使用带有 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

于 2013-10-11T14:01:19.723 回答
0

当您放大和缩小时，它看起来像是一个舍入/比率问题。( 25% )

  1. 当您放大或缩小时，您会遇到由于四舍五入和文本渲染的问题。确保布局可以承受一点拉伸而不会损坏是个好主意。
  2. 相对定位受到#1 中提到的问题的影响，因此不可靠。
  3. 研究使用某些东西来删除各种浏览器将应用的属性。您可以使用重置来为您提供更可行的东西，或者尝试规范化这些值以使它们在浏览器之间更加均匀。

通过在您的 CSS 文件 (li, ul) 中更改以下行将解决 Firefox、Chrome 等中的问题。
更改宽度：135 像素并添加边距：2 像素

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 中更小（css 中 ul 宽度设置为 822px）

ul
{
    width: 822;
    margin-left: -40px;
    position: relative;
}
于 2013-10-12T01:06:01.080 回答