0

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

在此处输入图像描述

这是我的 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;
}

有什么建议么？

4

9 回答 9

1

将前两个 CSS 规则更改为：

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

jsFiddle 示例

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

于 2013-05-01T18:26:31.830 回答
0

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

body {
height:1000px;
}

将 div 设置为导航栏和正文高度之间的差异的高度：

div {
height:850px
margin:auto;
}

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

于 2013-05-01T18:32:41.970 回答
0 
<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>
于 2013-05-01T18:33:52.063 回答
0

float: bottomCSS 中不存在。

在 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;
}
于 2013-05-01T18:35:30.450 回答
0

不要将表格用于网站布局。使用 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;
}

演示

于 2013-05-01T18:36:10.777 回答
0

改变li：

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

改变ul：

  • 删除overflow属性

你完成了！

在这个 jsFiddle中看到它。

于 2013-05-01T18:37:14.517 回答
0

试试这个：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;
}
于 2013-05-01T18:42:16.950 回答
0

这样的事情会更容易实现：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>
于 2013-05-01T18:42:48.437 回答
-1

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

于 2019-11-22T13:09:26.537 回答