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

我注意到删除 line: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/

Answer 2

您可以按照 Vic 的回答修复 CSS，这是完全合法的，但我认为这是标记和样式过于复杂的问题。如果您使用适合您要解决的问题的标记，您可以避免很多未来的麻烦。

解决方案

这是 inline-block 元素的完美用例，它适用于列出多个需要具有块级属性（如填充、背景颜色等）的内联元素。而不是尝试协调浮动和非浮动元素，使所有项目成为无序列表的一部分，并使用更广泛的类来设置列表项目的样式。

我已将您的 HTML 和 CSS 简化为使用类和更简单的标记来实现相同的效果：

body {
    background: tan;
}

.breadcrumb-wrap {
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb {
    background: #fff;
    color: #666;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    line-height: 2em;
    margin: 0 8px 0 0;
    padding: 0px 20px;
    text-align: center;
    vertical-align: middle;
}

.breadcrumb.active {
    background: #00abe2;
    color: #fff;
    padding: 0 15px 0 10px;
    position: relative;
}

.breadcrumb.active:after {
    content:"";
    border-bottom: 16px solid transparent;
    border-left: 16px solid #00abe2;
    border-top: 16px solid transparent;
    position: absolute;
    right: -15px;
    top: 0;
    z-index: 1;
}

<ul class="breadcrumb-wrap">
    <li class="breadcrumb">Shared</li>
    <li class="breadcrumb">Personal</li>
    <li class="breadcrumb">Users</li>
    <li class="breadcrumb active">Test User 1</li>
</ul>

CSS：对齐面包屑

CSS: Aligning breadcrumb

html

css

breadcrumbs

编辑

解决方案