我最近一直在做一个简单的网页。我想将几乎所有样式信息放在 CSS 文件中。页面的主要布局是一个表格。我看起来像这样:
<body>
<table class="glowna">
<tr>
<td colspan="2">...</td>
</tr>
<tr>
<td id="glowna_top" colspan="2">
<ul class="menu_gorne">
<li>..</li>
</ul>
</td>
</tr>
<tr>
<td id="glowna_menu_lewe">
<ul class="menu_lewe">
<li>...</li>
</ul>
</td>
<td id="glowna_main">
...
</td>
</tr>
</table>
</body>
CSS就像:
ul.menu_lewe, ul.menu_gorne {
display:block; list-style:none;margin:0;}
ul.menu_lewe {
width:200px; padding:2px 20px 2px 2px;
background-color:#9ce;border:none; vertical-align:top;}
ul.menu_lewe li {
border-bottom:1px solid #9ce; }
ul.menu_lewe a:link, ul a:visited {
display:block;width:176px;text-decoration:none;padding:7px;font- weight:bold;background-color:#27c;color:#def;border-right:10px solid #25b;border-left:5px solid #25b; }
ul.menu_lewe a:hover {
width:176px;background-color:#28e;color:#fff;border-right:20px solid #26d; }
ul.menu_gorne {
position:absolute; }
ul.menu_gorne li {
float:left;padding:2px 2px 2px 2px;background-color:#9ce;border:none; }
ul.menu_gorne a:link, ul a:visited {
text-decoration:none;display:block;width:200px;text-align:center;padding:5px 0;font-weight:bold;background-color:#27c;color:#def;border-top:10px solid #25b; }
ul.menu_gorne a:hover {
background-color:#28e;color:#fff;border-top:20px solid #26d; }
ul.lista_dostawcow {
width:800px;}
table.glowna {
background-color:#9ce;table-layout:fixed;width:1024px;margin-left:auto;margin-right:auto; }
td#glowna_top {
height:55px; vertical-align:top;}
td#glowna_main {
width:824px; text-align:left;}
td#glowna_menu_lewe {
width:200px;}
问题是:
1。即使我设置了所有宽度,我仍然得到表格单元格:“ glowna_menu_lewe ”和“ glowna_main ”划分为 50%:50%。我希望单元格“ glowna_menu_lewe ”只有200像素或附近,而另一个可能会填满其余的空间。
2 . 我想将列表“ menu_lewe ”放在其单元格的顶部。现在,即使我将verical-align属性设置为顶部,它也是垂直居中的。
很抱歉发布了这么多代码,但我不知道可能导致问题的原因。