使ul浮动，但仍有底部边框占用整页

Question

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

HTML

      <ul class="slds-tabs--default__nav">
        <li clasd="slds-tabs--default__item slds-active"><a className="slds-tabs--default__link">Date Created</a></li>
        <li class="slds-tabs--default__item"><a className="slds-tabs--default__link">Title</a></li>
        <li class="slds-tabs--default__item"><a className="slds-tabs--default__link">Total Responses</a></li>
      </ul>

CSS

li {
  margin-left: 0;
}

.slds-tabs--default__nav {
 display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
border-bottom: 1px solid #000000;
}

当你向右浮动时，边框只占据页面的一小部分。不确定我的选择是保持底部边框还是向右浮动。

Answer 1

使用现有标记，您可以将链接放在右侧，并使用justify-content: flex-end;

维护父元素的宽度

＆＃13;

＆＃13;

li {
  margin-left: 0;
}

.slds-tabs--default__nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  justify-content: flex-end;
  border-bottom: 1px solid #000000;
}

＆＃13;

<ul class="slds-tabs--default__nav">
  <li clasd="slds-tabs--default__item slds-active"><a className="slds-tabs--default__link">Date Created</a></li>
  <li class="slds-tabs--default__item"><a className="slds-tabs--default__link">Title</a></li>
  <li class="slds-tabs--default__item"><a className="slds-tabs--default__link">Total Responses</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

如果你想浮动元素，一个常用的方法是将导航放在另一个元素中并将边框应用到父元素

＆＃13;

＆＃13;

li {
  margin-left: 0;
}

.slds-tabs--default__nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  justify-content: flex-end;
  float: right;
}

header {
  overflow: auto;
  border-bottom: 1px solid #000000;
}

＆＃13;

<header>
  <ul class="slds-tabs--default__nav">
    <li clasd="slds-tabs--default__item slds-active"><a className="slds-tabs--default__link">Date Created</a></li>
    <li class="slds-tabs--default__item"><a className="slds-tabs--default__link">Title</a></li>
    <li class="slds-tabs--default__item"><a className="slds-tabs--default__link">Total Responses</a></li>
  </ul>
</header>

＆＃13;

＆＃13;

＆＃13;