Question

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

enter image description here

以下是我的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元素上。

Answer 2

如果绝对没有任何对你有用，请给身体高度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

CSS中不存在

float: bottom。

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

这是我知道的最简单的方法，假设您希望菜单始终显示在底部，甚至在滚动之前，并假设您的菜单为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（部门）

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

DEMO

Answer 6

更改li：

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

更改ul：

删除overflow属性

你已经完成了！

在this 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则相同：这会将其放置在正确的位置。

不能把这些按钮放在底部

9 个答案: