html - CSS:对齐面包屑

Question

我正在尝试将面包屑与其主体的其余部分对齐。

BODY {
  height: 100%;
  overflow: hidden;
  background-color: tan;
}
/* breadcrumb styles */

#test-breadcrumb ul {
  list-style: none;
  display: inline-table;
  padding-left: 2px;
}
#test-breadcrumb ul li {
  display: block;
  float: left;
  line-height: 32px;
  vertical-align: middle;
  text-align: center;
  position: relative;
  margin: 0 8px 0 0;
  font-size: 14px;
  padding-top: 0px;
  padding-bottom: 0px;
}
#test-breadcrumb ul li.test-breadcrumb-active {
  background: #00abe2;
  padding-right: 15px;
  padding-left: 10px;
  color: #ffffff;
}
#test-breadcrumb ul li:after {
  content: "";
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  position: absolute;
  right: -15px;
  top: 0;
  z-index: 1;
}
#test-breadcrumb ul li.test-breadcrumb-active:after {
  border-left: 16px solid #00abe2;
}
#test-breadcrumb ul li:before {
  content: "";
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 16px solid #efefef;
  position: absolute;
  left: 0;
  top: 0;
}
#test-breadcrumb ul li:first-child {
  padding-left: 20px;
}
#test-breadcrumb ul li:first-child:before {
  display: none;
}
.test-breadcrumb-area {
  padding: 32px 0 12px 0;
  margin-left: 10px;
}
.test-navbutton-inactive {
  cursor: pointer;
  display: inline-block;
  line-height: 32px;
  vertical-align: middle;
  text-align: center;
  background: #ffffff;
  color: #666666;
  padding: 0px 20px;
  margin-right: 4px;
  margin-bottom: 8px;
  text-decoration: none;
}

<div class="test-breadcrumbs">
  <div class="test-breadcrumb-area">
    <div id="test-breadcrumb">
      <div id="test-navbutton-shared" class="test-navbutton-inactive">Shared</div>
      <div id="test-navbutton-personal" class="test-navbutton-inactive">Personal</div>
      <div id="test-navbutton-users" class="test-navbutton-inactive" style="cursor: pointer;">Users</div>
      <ul>
        <li id="test-breadcrumb-user-label" class="test-breadcrumb-active">test user 1</li>
      </ul>
    </div>
    <div class="test-clear"></div>
  </div>
</div>

这是一个 jsfiddle

我注意到删除第 14 行的 float:left 会稍微向下移动测试用户面包屑，但这并没有解决问题，我预计它会横向移动而不是垂直移动。我还添加了 vertical-align: middle line:16 但是它似乎没有太大区别。

我应该修改什么才能正确对齐最后一个面包屑？

Answer 1

您希望为它提供与主体的其余部分相同的边距，并将其垂直对齐到底部。

例如:

#test-breadcrumb ul {
    margin-bottom: 8px;
    vertical-align: bottom;
}

https://jsfiddle.net/1Lpk8qdd/9/

编辑

更好的解决方案是移除边距并将其垂直对齐到顶部。

例如:

#test-breadcrumb ul {
    margin: 0;
    vertical-align: top;
}

https://jsfiddle.net/1Lpk8qdd/11/