不能把这些按钮放在底部

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 示例

您一直在没有单位的情况下为ul设置边距，因此这基本上被忽略了，但无论如何您都不想这样做。 而是将顶部填充放在li元素上。

Answer 2

如果绝对没有什么对你有用，给 body 一个高度 1000 或其他东西：

body {
height:1000px;
}

使 div 成为导航栏和主体高度之间差异的高度：

div {
height:850px
margin:auto;
}

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

Answer 3

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

Answer 4

float: bottom CSS 中不存在float: bottom 。

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

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

HTML：

<div class="page-container">
  <div class="scrolling-content">
      <!-- Your other stuff here -->
  </div>
  <ul class="bottom-menu">
    <!-- The content of your menu -->
  </ul>
</div>

CSS：

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

Answer 5

永远不要将表格用于网站布局。使用 DIVES (divisions)

HTML

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

CSS

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

演示

Answer 6

li变化：

• 删除float属性
• 添加display为inline-block
• 添加relative position
• 将bottom添加到-20px左右

改变ul ：

• 删除overflow属性

你完成了！

在这个 jsFiddle 中看到它。

Answer 7

试试这个： http : //jsfiddle.net/kuroisuna/TKY4p/1/

在你的 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;
}

---

但是，如果没有表格，这将很自然： http : //jsfiddle.net/kuroisuna/5heFE/2/

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

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

Answer 8

这样的事情会更容易实现： http : //jsfiddle.net/C2NEY/1/

CSS：

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

HTML：

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

Answer 9

而不是“margin-left：auto”写“margin-left：”和像12Px或任何你想要的边距值，和margin-top相同：这会将它定位到正确的位置。