對齊問題，同時縮放頁面

請查看代碼其工作正常，直到縮放頁面...縮放頁面後頁面變得與其水平菜單集中在一起請seee代碼這將是偉大的，如果任何人都可以告訴什麼是什麼「不要做「，而不是隻爲這提供正確的CSS部分我在這個新的和想了解rathern方面比從各種來源這裏複製的是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>

來源

2013-02-04 Prince Singh

您的所有div設置在px，這意味着像素。例如，如果用戶使文字變大，則像素不會縮放，因爲屏幕上的像素尺寸仍然相同。如果您在em中設置div的大小，意思是「當前字體中字母m的寬度」或%，則事物應該更好地縮放。此外，一旦您習慣使用CSS，請嘗試使用諸如Twitter bootstrap之類的框架來讓您的生活更輕鬆。

來源

2013-02-04 18:00:09

謝謝你們的幫助.. :) –

檢查這個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部分//

<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>

來源

2013-02-04 18:16:31

謝謝你非常bhai：x它完全按照我想要的方式工作...這非常有幫助：）@ amuk saxena ............ could yu plz告訴我什麼其實我shudnt正在做避免這些問題。 –

烏爾歡迎，只要你關閉此div標籤後，加入這行

sentence....

，添加以下代碼太 - >

這將避免線路失真.. – 2013-02-05 02:19:58

我的意思是第一行後說你的頁面已經完成，你想開始一個新行，如果在上一行中添加了float：left，則添加「clear：both」代碼... – 2013-02-05 02:29:06

對齊問題，同時縮放頁面

回答

相關問題