作者ckw19 (keep going)
站內Web_Design
標題[請益] 如何把連結區塊向右靠??
時間Sun Oct 17 03:28:15 2010
我在做側邊欄的清單，並且把清單加上連結標籤
但是清單卻是靠在側邊欄的右側
就算我用margin-left:0px也完全不動
就好像左邊卡了塊石頭一樣移不過去
改過了side ul li a的CSS，可是都行不通
請問我這樣的CSS語法，哪裡造成了這樣的結果??
CSS:
@charset "utf-8";
body{
text-align:center;
background-color:#FFF;
color:#666;
font-size:75%;
line-height:1.5;
font-family:Arial, Helvetica, sans-serif;
}
div#entire {
margin:auto;
width:760px;
}
div#header{/*檔頭文字塊*/
background-color:#FF2424;
margin:10px auto 0px;
border-bottom:3px solid #CCC;
color:#FFF;
padding:20px 0 20px 30px;
font-size:20px;
text-align:left;
}
div
#global-nav{/*導覽列*/
height:30px;
background-color:#FFF;
margin:10px 0 0px 0;
border-left:10px solid #FF2424;
width:750px;
}
div
#global-nav ul{/*導覽列清單*/
list-style:none;
margin:0;
padding:0px;
}
div
#global-nav ul li{/*導覽列清單選項*/
float:left;
width:187.5px;
margin:0px 0 0 0;
padding:0px 0 0 0;
}
div
#global-nav a{/*導覽列連結*/
display:block;
text-decoration:none;
padding:8px 0 4px 10px;
color:#666;
}
div
#global-nav a:hover{/*導覽動態*/
background-color:#FF2424;
color:#FFF;
}
div#side {/*側邊*/
float:left;
width: 150px;
height:550px;
margin:10px 0;
background-color:#FFF;
border-top:1px solid #FF2424;
border-left:2px solid #FF2424;
}
div#side ul{/*側邊清單*/
list-style:none;
border:1px solid yellow;
clear:both;
}
div#side ul li{/*側邊清單選項*/
border:1px solid red;
}
div#side a{/*側邊連結*/
text-decoration:none;
display:block;
padding:4px 8px 4px 8px;
color:#666;
border:1px solid green;
}
div#side a:hover{/*側邊聯結動態*/
background-color:#FF2424;
color:#FFF;
}
div#main {/*主要區塊*/
float:right;
height:550px;
width:590px;
margin:10px 0;
background-color:#FFF;
border-top:1px solid #FF2424;
border-left:2px solid #FF2424;
}
div#footer {/*註腳*/
clear:both;
background-color:#FF2424;
color:#FFF;
margin-bottom:10px;
border-bottom:3px solid #CCC;
padding:10px 0 10px 0;
}
HTML:
<!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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Cntent-Script-Type" content="text/javascript" />
<style type="text/css"> @import "css/css.css"; </style> <media="screen,
projection, tv" />
<link rel="contents" href="index.html" title="HOME" />
<title>半人馬</title>
</head>
<body>
<div id="entire">
<div id="header">半人馬
</div>
<div id="global-nav">
<ul>
<li><a href="Journel.html">Journel</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="Web.html">Web</a></li>
<li><a href="Leave_Messages.html">Leave Messages</a></li>
</ul>
</div>
<div id="main"> main </div>
<div id="side">
<ul>
<li><a href="manphotos.html">人物照</a></li>
<li><a href="#">風景照</a></li>
<li><a href="#">情境照</a></li>
<li><a href="#">動物照</a></li>
<li><a href="#">廣告照</a></li>
</ul>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
到底是哪裡出狀況了，麻煩各位高手了，謝謝!!~
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 124.11.140.124
※ 編輯: ckw19 來自: 124.11.140.124 (10/17 03:29)
→ ckw19:我把list去掉 只有a標籤就可以 但為什麼會這樣勒?? 10/17 03:31
→ TonyQ:單看你的描述還真的搞不懂你想說什麼 XD 10/17 03:36
→ ckw19:@@" 看上面那個顯示是OK的耶 Tony大冒昧問一下你改了什麼?? 10/17 04:05
→ ckw19:看上面正常 但我用IE FX開 側邊選單都往右靠了 10/17 04:14
→ TonyQ:我幾乎只是照著貼上去耶 XD 10/17 13:43
→ TonyQ:你可以另存右下角那個頁框的原始碼來看～ 10/17 13:44
→ superpai:ul本來就有預設的padding-left ，你li當然無法靠左邊囉 10/17 17:18
→ ckw19:是喔 那要怎麼讓他取消左側padding?? 10/17 17:29
→ ckw19:是用padding-left:0就好了嗎?? 10/17 17:30
→ ckw19:好了耶!!~ 非常感謝 受益良多 10/17 17:31