CSS 证明三个元素

Question

我想在左侧有一个标题，在右侧有一个按钮。
我想要一条线。

.container {
  background-image: url(http://www.deutsches-museum.de/fileadmin/Content/010_DM/020_Ausstellungen/100_Museumsinsel/030_Turm/030_Kunst/bild32.jpg);
  height: 100px;
  color: #fff;
}
.col-xs-8 {
  border: 1px solid blue;
}
ul {
  display: flex;
  text-align: justify;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul li {
  overflow: hidden;
  white-space: nowrap;
}
li:first-child {
  padding-right: 10px;
}
li:last-child {
  padding-left: 10px;
  font-size: 10px;
}
h2 {
  margin: 10px 0 0 0;
  font-size: 20px;
  font-weight: normal;
}
.fa-stack-1x {
  color: #777;
}
.line {
  margin: 0 auto 5px;
  border-bottom: 2px solid red;
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="col-xs-8">

      <div class="breadcrump">
        <ul class="menu">
          <li>
            <h2>Here is a example Headline</h2>
          </li>
          <li class="line"></li>
          <li>
            <span class="fa-stack fa-lg">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa fa-chevron-left fa-stack-1x"></i>
        </span>
            <span class="fa-stack fa-lg">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa fa-chevron-right fa-stack-1x"></i>
        </span>
          </li>
        </ul>
      </div>

    </div>
  </div>
</div>

对齐后，该行会覆盖标题和按钮，这不是我想要的。

http://codepen.io/daluela/pen/aOVmGw

Answer 1

如果我明白你想要什么，你需要做的就是将 .line 中的 width:100% 替换为 flex:1;。

Answer 2

从您的列表项中删除 overflow:hidden。

http://codepen.io/anon/pen/gpXgRW

ul li {
    overflow: hidden;/*remove this*/
    white-space: nowrap;
}

CSS 证明三个元素

CSS justify three elements

css

justify