html - 不能把这些按钮放在底部

Question

我在尝试将这些按钮放在底部而不是中间时遇到问题。我已经通过互联网搜索，尝试了很多东西，但仍然无法正常工作。

这是我的 HTML 代码片段:

<table class="table">
  <tr>
    <td class = "td"><img class = "logo" src="images/CoffeeLogo.jpg"></td>
    <td>
      <ul>
        <li><a class = "bt" href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#coffee">Menu</a></li>
        <li><a href="signupform.php">Sign up</a></li>
        <li><a href="#extra">extra</a></li>
      </ul>
    </td>
  </tr>
</table>

这是我的按钮 CSS 代码:

ul
{
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom;
margin-bottom: -10;

}
li
{
float:left;

}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
.table, .td, .th
{
border-collapse:collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border:0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}

有什么建议吗？

Answer 1

将前两个 CSS 规则更改为:

ul {
    list-style-type:none;
    padding:0;
    overflow:hidden;
    margin: 0;
}
li {
    float:left;
    padding-top:20px;
}

jsFiddle example

您一直在没有单位的 ul 上留边距，因此基本上被忽略了，但您不想那样做。而是将顶部填充放在 li 元素上。