0

我最近一直在做一个简单的网页。我想将几乎所有样式信息放在 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属性设置为顶部，它也是垂直居中的。

很抱歉发布了这么多代码，但我不知道可能导致问题的原因。

4

1 回答 1

1

1 - 改变：

table.glowna { 
  background-color:#9ce;
  table-layout:fixed;
  width:1024px;
  margin-left:auto;
  margin-right:auto; 
}
td#glowna_main { 
  width:824px;
  text-align:left;
}

对此：

table.glowna { 
  background-color:#9ce;
  width:1024px;
  margin-left:auto;
  margin-right:auto;
}
td#glowna_main { 
  text-align:left;
}

2-使用valign="top"属性来td标记而不是vertical-align:top;

于 2012-11-11T15:08:47.407 回答