Question

我试图将面包屑与身体的其余部分对齐。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

这里是jsfiddle

我注意到删除float:left在线：14会将测试用户痕迹略微向下移动，但这并没有解决问题，我预计它会横向移动而不是垂直移动。我还添加了vertical-align: middle行：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＆amp; 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：对齐面包屑

2 个答案:

修改

解决方案