Question

So, I've been trying to work on a website from scratch, in a simple, blocky format, where the navigation is at the top of the page, as an unordered list full of <a> elements, all into list tags, also within a <nav> tag, as such;

* {
  margin: 0;
}
html,
body {
  height: 100%;
  margin: 0;
}
.bdy {
  display: block;
  margin: 0;
  background-color: #d2d2d2;
  height: 85%;
  float: left;
  width: 100%;
}
nav.navbar {
  margin: 0;
  padding: 0;
  height: 15%;
  width: 100%;
}
nav ul {
  float: left;
  list-style-type: none;
  height: 100%;
  text-align: center;
  background-color: #326ada;
  width: 97.9%;
}
nav.navbar li {
  display: inline-block;
  float: left;
  bottom: 0;
  margin-left: 1%;
  margin-top: 10%;
}
nav li a {
  text-decoration: none;
  color: white;
}

<nav class="navbar">
  <ul>
    <li><a href="#" class="first">Home</a></li>
    <li><a href="#">Assignments</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>
<div class="bdy">
  <p>content</p>
</div>

What I want to do is have it where the unordered list has its elements always at the bottom of the Navigation area (Blue), about 10px from the bottom, and using margins with percentages doesn't seem to work very well.

Is there any way that I could float the list, without disturbing order, downwards?

Answer 1

您可以做的是避免使用%页边距，而是将每个a内的文字对齐到列表的底部，试试这个：

* {
  margin: 0;
}
html,
body {
  height: 100%;
  margin: 0;
}
.bdy {
  display: block;
  margin: 0;
  background-color: #d2d2d2;
  height: 85%;
  float: left;
  width: 100%;
}
nav.navbar {
  margin: 0;
  padding: 0;
  height: 15%;
  background-color: red;
  width: 100%;
}
nav ul {
  float: left;
  list-style-type: none;
  height: 100%;
  text-align: center;
  background-color: #326ada;
  width: 97.9%;
}
nav.navbar li {
  float: left;
  height:100%;
  bottom: 0;
  margin-left: 20px;
  box-sizing:border-box;
  padding-bottom:10px;
  white-space:nowrap;
}
nav li:before {
  content:"";
  height:100%;
  display:inline-block;
  vertical-align:bottom;
}
nav li a {
  text-decoration: none;
  color: white;
}

<nav class="navbar">
  <ul>
    <li><a href="#" class="first">Home</a></li>
    <li><a href="#">Assignments</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>
<div class="bdy">
  <p>content</p>
</div>

Answer 2

CSS代码中有很多不必要的东西。看看我的片段和那里的设置，我想这就是你想要的。

* {
  margin: 0;
}

html,
body {
  height: 100%;
  margin: 0;
}

.bdy {
  min-height: 85%;
  background-color: #d2d2d2;
}

nav.navbar {
  position: relative;
  height: 15%;
  background-color: red;
}

nav ul {
  position: absolute;
  width: 100%;
  bottom: 0;
  list-style-type: none;
  text-align: center;
  background-color: #326ada;
  padding: 5px 0 2px 0;
}

nav.navbar li {
  display: inline-block;
  margin-left: 1%;
}

nav li a {
  text-decoration: none;
  color: white;
}

<nav class="navbar">
  <ul>
    <li><a href="#" class="first">Home</a></li>
    <li><a href="#">Assignments</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>
<div class="bdy">
  <p>content</p>
</div>

浮动<a> anchor elements within a div

2 个答案: