Question

我有一个垂直菜单，我希望最后一个li标签显示在页面底部。我尝试了一些建议，例如将底部垂直对齐，但这似乎行不通。

这是我的HTML。

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  min-height: 100%;
  max-height: 100%;
}

#intro {
  width: 100%;
  height: 50px;
  background-color: blue;
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  display: inline-block;
  position: fixed;
  padding: 0;
}

#leftmenu {
  width: 100px;
  min-height: 100%;
  max-height: 100%;
  height: 100%;
  background-color: lightblue;
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  display: inline-block;
  position: fixed;
  overflow: hidden;
  padding: 0;
  float: left;
}

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 150px;
  background-color: #f1f1f1;
  position: fixed;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

#content {
  margin-left: 50%;
  margin-right: 50%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>SquashBug</title>
</head>

<body>

  <div id="intro">
    <div id="content">
      <p1>Content</p1>
    </div>
  </div>
  <div id="leftmenu">
    <ul>
      <li><a class="active" href="#Start">Issue Finder</a></li>
      <li><a href="#First">System Information</a></li>
      <li><a href="#Second">Running Processes</a></li>
      <li><a href="#Third">Anti-Virus</a></li>
      <li><a href="#Fourth">About</a></li>
    </ul>
  </div>
</body>

</html>

我基本上想做的是，如果您单击此链接https://www.w3schools.com/Css/css_navbar.asp，然后在右对齐链接下查看，您将看到一个水平菜单，其中“关于”被迫移至右侧。我想将它放在垂直菜单中，最后一个链接在页面底部。如果有任何有用的信息，我将创建一个电子应用程序。

Answer 1

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

#content {
  width: 100%;
  height: 100%;
  background-color: #e0fcff;
  margin-left: 150px;
  margin-right: 0;
  margin-top: 0;
  display: inline-block;
  position: fixed;
  padding: 5px 5px 5px 5px;
}

#leftmenu {
  display: inline-block;
  list-style-type: none;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 150px;
  background-color: #f1f1f1;
  position: fixed;
  overflow: auto;
  float: left;
}

ul {}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

.Btm {
  position: fixed;
  Bottom: 0;
  width: 150px;
}

.Btm a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

<div id="content">
  <p1>Content</p1>
</div>

<ul id="leftmenu">
  <li><a class="active" href="#Start">Issue Finder</a></li>
  <li><a href="#First">System Information</a></li>
  <li><a href="#Second">Running Processes</a></li>
  <li><a href="#Third">Anti-Virus</a></li>
  <li class="Btm"><a href="#Fourth">About</a></li>
</ul>

Answer 2

使用以下代码：

.nav-list {
    height: 100%;
    position: relative;
}

.last {
    position: absolute;
    bottom: 0;
}

由于CSS无法查看哪个<li>标签是最后一个，因此您必须使用<li class=“last”>进行手动设置。确保您的导航栏是具有设置高度的<ul class=“nav-list”>标签（又名auto，而不是高度）。我建议使用height: 100%）

使一个<li>出现在页面底部

2 个答案: