html css對齊
[英]html css alignment
問題描述
請參考下面的代碼。 我希望將“藍色”和所有其他顏色的框拉伸。 我的意思是它應該以樣式和顏色的邊界開始和結束。
謝謝
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Component5 colors</title>
<style type="text/css">
.theoneclicked {
background-color:#b0c4de;
}
ul {
display: block;
list-style: none;
}
ul#nav_top {
width:100px;
border: 1px solid black;
}
li#nav_top1, li#colors {
width:100px;
border: 1px solid black;
display: block;
}
li#nav_mid1 {
border: 1px solid black;
}
a {
text-decoration:none;
}
</style>
</head>
<body>
<ul id="nav_top">
<li id="nav_top1"><span class="heading"><a href="comp5.html">Styles</a></span></li>
<li id="colors"><span class="theoneclicked"><a href="colors.html">Colors</a></span></li>
<ul id="nav_mid">
<li id="nav_mid1">
Blue
</li>
<li id="nav_mid1"> Orange</li>
<li id="nav_mid1">Green</li>
</ul>
<li id="images"><span class="nav">Images</span></li>
</ul>
</body>
</html>
3 個解決方案
解決方案1
1 2010-01-18 20:06:02
首先，將id更改為class。 “ id”屬性應用作頁面上的唯一標識符。 例如
<li id="nav_top1">
變
<li class="nav_top1">
然后更改樣式中的＃。
例如
ul#nav_top {
變為：
ul.nav_top {
最后添加以下內容：
ul.nav_mid
{
padding-left:0;
}
這在Firefox中有效，但我不敢打賭IE僅以此為准。
您還應該將嵌套的ul列表包裝在li元素中。
解決方案2
1 已采納 2010-01-18 20:06:33
對於初學者，您的HTML無效。 li應包含一個嵌套的ul元素。 另外，您不能將nav_mid1重復作為ID。 您需要將一個類用於多個元素。
將標記和CSS更改為以下內容可以解決您的問題。 注意，我在嵌套UL的左側添加了一些填充，因為它顯然是“顏色”的子組。
<ul id="nav_top">
<li id="nav_top1"><span class="heading"><a href="comp5.html">Styles</a></span></li>
<li id="colors"><span class="theoneclicked"><a href="colors.html">Colors</a></span></li>
<li>
<ul id="nav_mid">
<li class="nav_mid1">
Blue
</li>
<li class="nav_mid1"> Orange</li>
<li class="nav_mid1 last">Green</li>
</ul>
</li>
<li id="images"><span class="nav">Images</span></li>
</ul>
CSS
ul#nav_top {
width: 100px;
display: block;
list-style: none;
}
ul ul {
padding-left: 10px;}
ul#nav_top li {
border: 1px solid black;
}
li#nav_top1, li#colors {
display: block;
}
ul#nav_mid li {
border-width: 0 0 1px 0;
}
#nav_mid li.last {
border-bottom: none;
}
a {
text-decoration:none;
}
解決方案3
0 2010-01-18 20:09:56
您需要（取消）在ul上設置一些邊距和填充以執行您想要的操作。 設置list-style:none還不夠，因為它還有余量。
文字對齊-CSS或HTML？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.