Question

请看到代码工作正常，直到缩放页面...缩放页面后页面变得扭曲，其水平菜单拼凑在一起请看代码如果有人可以告诉我什么“不做”代替它会很棒只是为此提供正确的CSS部分我是新的，并希望学习方面而不是从各种来源复制这是CSS部分..

body{ background-color:#603}
div#hor ul{ position:relative; left:16%; }
 div#hor li,div#ver li{  float:left;list-style-type:none; background-color:#603; border-radius:22px; margin:5px; }
div#hor a,div#ver a{text-decoration:none; 
 padding-left:32px; padding-right:32px;
 font-family:"Comic Sans MS", cursive; 
 line-height::100px;padding-right: 32px;
 padding-left: 32px;
 display: block;
 line-height: 40px;
 color:#fff;
}
div#hor a:hover{background-color:#fff;color: #603;border-radius:22px; 
    }
    div#hor a:focus{background-color:#fff;color:#603;border-radius:22px; font-weight:bold;
    }
    div#ver{  position:relative; top:100px;}
    div#ver ul{ position:relative; left:-50%; float:left;  }
    div#ver li{ float:none; margin-bottom:20px;}

    div#ver a:hover,div#ver a:focus{border-radius:22px;background-color:#fff;color: #603}

    div#ver a:focus{ font-weight:bold; }


  # here is the html part ...#



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <link rel="stylesheet" type="text/css" href="mystyle.css"  />


    </head>

    <body>
    <div id="hor">
    <ul>
    <li ><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a  href="#">Contact</a></li>
    </ul>
    </div>
    <div id="ver"> 
    <ul>
    <li ><a href="#">Java</a></li>
    <li><a href="#">Php</a></li>
    <li><a href="#">Asp.net</a></li>
    <li><a href="#">Android</a></li>
    <li><a  href="#">Iphone</a></li>
    </ul>

     </div>


    </body>
    </html>

Answer 1

您的所有div设置都在px，这意味着像素。例如，如果用户使文本变大，则像素不会缩放，因为屏幕上的像素仍然是相同的大小。如果你在em中调整div的大小，意味着'当前字体中字母m的宽度'或%事物应该更好地扩展。此外，一旦您习惯使用CSS，请尝试使用Twitter bootstrap等框架，让您的生活更轻松。

Answer 2

检查此CSS和HTML 只需将其替换为现有的，请告诉我

   body
    {
background-color:#603;  
}
.page
{
width:960px;
margin:0px auto 0px auto;
}
.clear
{
clear:both;
}
div#hor
{

}
div#hor ul
{ 
list-style-type:none;
 }
div#ver
{
float:left;
}
 div#hor li
{  
float:left;
background-color:#603; 
border-radius:22px; 
}

div#ver
{

}
div#ver li
{
list-style-type:none; 
background-color:#603; 
border-radius:22px; 
margin:5px; 
}
div#hor a,div#ver a
{
text-decoration:none; 
 padding-left:32px;
 padding-right:32px;
 font-family:"Comic Sans MS", cursive; 
 line-height:100px;
display: block;
 line-height: 40px;
 color:#fff;
}
div#hor a:hover
{
background-color:#fff;color: #603;border-radius:22px; 
}
div#hor a:focus
{
background-color:#fff;color:#603;border-radius:22px; font-weight:bold;
}
div#ver
{
//position:relative; top:100px;
}
div#ver ul
{ 
position:relative;float:left;  
}
div#ver li
{
//float:none; margin-bottom:20px;
}

div#ver a:hover,div#ver a:focus
{
border-radius:22px;background-color:#fff;color: #603
}

div#ver a:focus
{
 font-weight:bold; 
}

// Html Part //

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="mystyle.css"  />


</head>

<body>
<div class="page">
<div id="hor">
<ul>
<li ><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a  href="#">Contact</a></li>
</ul>
</div>

<div class="clear"></div>

<div id="ver"> 
<ul>
<li ><a href="#">Java</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">Asp.net</a></li>
<li><a href="#">Android</a></li>
<li><a  href="#">Iphone</a></li>
</ul>

 </div>

</div>

</body>
</html>

缩放页面时对齐问题

2 个答案: