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 に答える