Html Can'；不要把这些按钮放在底部

我在尝试将这些按钮放在底部而不是中间时遇到问题。我在网上搜索过，尝试过很多东西，但仍然不起作用

以下是我的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;
    margin: 0;
}
li {
    float:left;
    padding-top:20px;
}

---

你在你的

ul

上加了一个空白，没有单位，所以基本上被忽略了，但你无论如何都不想这样做。相反，在

li

元素上放置顶部填充物。

如果绝对没有任何效果，请将身体高度设置为1000或更高：

body {
height:1000px;
}

将导航条与身体高度之差的高度进行div：

div {
height:850px
margin:auto;
}

并确保您的div处于自动边距。这会将导航条向下推到底部。 我希望这能有所帮助。

<style type="text/css">
        ul {
            list-style-type: none;
            padding: 0;
            overflow: hidden;
            margin-bottom: 0;
        }

        li {
            float: left;
             padding-top:20px;
        }

        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;
        }
    </style>

保险商实验室{
列表样式类型：无；
填充：0；
溢出：隐藏；
页边距底部：0；
}
李{
浮动：左；
填充顶部：20px；
}
a:链接，a:已访问{
显示：块；
高度：18px；
宽度：122px；
颜色：#FFFFFF；
背景色：#ca3838；
文本对齐：居中；
填充：4px；
文字装饰：无；
文本转换：大写；
字体系列：“Gill Sans MT”；
字号：13.5pt；
}
a:悬停，a:活动{
背景色：#FF8080；
}
.table、.td、.th{
边界塌陷：塌陷；
moz盒阴影：0 0 2px 2px#888；
webkit盒阴影：0 0 2px 2px#888；
盒影：0 0 2px 2px#888；
边界：0px；
左边框：10px纯白；
左边距：自动；
右边距：自动；
填充：0；
背景色：#ca3838；
}

浮动：CSS中不存在底部

在HTML布局中，将内容放在底部的关键是首先确保容器到达底部，然后以绝对位置放在底部，或者确保上面流动的内容向下推动内容

这里是我知道的最简单的方法，假设您希望菜单始终显示在底部，甚至在滚动之前，并且假设您的菜单是

20px

高的

HTML:

---

永远不要将表格用于网站布局。使用潜水（分区）

HTML

更改

li

：

• 删除

  float

  属性
• 添加

  显示

  为

  内联块

• 添加

  位置

  为

  相对

• 将

  底部添加到
  -20px
  左右

更改

ul

：

• 删除

  溢出

  属性

你完了

现场观看。

试试这个：

在CSS中：

ul {
    list-style-type:none;
    padding:0;
    overflow:hidden;
    float: bottom; /* This doesn't exist */
    margin: 20px 0 4px 0;
}
li {
    float:left;
    margin: 0;
}

---

但是，如果没有桌子，这将是非常自然的：

HTML

<ul>
    <li class="logo"><img class="logo" src="images/CoffeeLogo.jpg" width="20" height="18"></li>
    <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="#signup">Sign Up</a></li>
    <li><a href="#extra">Extra</a></li>
</ul>

---

这样做会更容易实现：

CSS:

HTML:

而不是“左边距：自动“写入”左边距：”和像12Px或任何您想要的边距值，以及边距顶部的相同值：

---

这会将其定位到正确的位置

嗨，我用表格来创建我的网站布局。如果有比使用表格来显示网站布局更好的选择，请告诉我？您应该使用div和css进行样式设置，避免使用表格进行样式设置，除非您实际拥有表格数据。使用

和

可以更轻松地完成此操作（代码更少）。将

ul

放在

div

中，然后将

div

放在一些

填充顶部

来创建上面的空间。啊，是的，你们说得对。我以前用过这个，但忘了它是怎么工作的。我猜是时候再次跳到谷歌了@user11998看看我的答案：）@Jacob-meh，不管怎么说，它被忽略了，但很好。移除。嘿，成功了！“填充顶部：80px；”产生了不同。非常感谢！哇，Jfiddle真是太棒了谢谢你的例子。这将有助于我的知识D

html, body {
    height: 100%;
}

.page-container { /* This takes up the whole window */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.scrolling-content {
    position: absolute;
    top: 0;
    bottom: 20px;
    left: 0;
    right: 0;
    overflow: auto;
}

.bottom-menu {
    position: absolute;
    height: 20px;;
    bottom: 0;
    left: 0;
    right: 0;
}

<div id="box">


            <ul>
                <li><a class="bt" href="#home">Home</a>
                </li>
                <li><a href="#about">About</a>
                </li>
                <li><a href="#coffee">Menu</a>
                </li>

            </ul>
</div>

#box{
    background:#000;
   height:200px;
    position:relative;
}

ul {
 position:absolute;
    bottom:0;

}
li {
    float:left;
    margin-right:20px;
   list-style-type:none;

}
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;
}

ul {
    list-style-type:none;
    padding:0;
    overflow:hidden;
    float: bottom; /* This doesn't exist */
    margin: 20px 0 4px 0;
}
li {
    float:left;
    margin: 0;
}

<ul>
    <li class="logo"><img class="logo" src="images/CoffeeLogo.jpg" width="20" height="18"></li>
    <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="#signup">Sign Up</a></li>
    <li><a href="#extra">Extra</a></li>
</ul>

ul {
    list-style-type:none;
    padding:0;
    overflow:hidden;
    margin: 0;
}
li {
    float:left;
}
a:link, a:visited {
    display:block;
    width:122px;
    color:#FFFFFF;
    background-color:#ca3838;
    text-align:center;
    padding:20px 4px 4px 4px;
    text-decoration:none;
    text-transform:uppercase;
    font-family:"Gill Sans MT";
    font-size: 13.5pt;
}
a:hover, a:active {
    background-color: #FF8080;
}
li.logo {
    background-color:#ca3838;
    padding:24px 4px 4px 4px;
}

#header {
  background-color:#ca3838;
}
#nav {
  width: 100%;
  margin: 0;
  padding: 0;
}
#nav li {
  display:inline-block;
  margin:0;
  padding:0;
  height: 25px;
  width:122px;
  padding:4px;
  text-align:center;
}
#nav li:hover {
  background-color: #FF8080;
}
#nav a {
  color:#FFFFFF;
  text-decoration:none;
  text-transform:uppercase;
  font-family:"Gill Sans MT";
  font-size: 13.5pt;
}

<div id="header">
  <img class="logo" src="images/CoffeeLogo.jpg" />
  <ul id="nav">
    <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>
</div>