ul を右にフロートさせますが、下枠がページ全体を占めるようにします

debugcn 投稿 Dev

タイラー・ジカ

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

右にフロートすると、境界線はページのごく一部しか占めません。下の境界線を維持し、まだ正しく浮くためのオプションが何であるかわかりません。

マイケル・コーカー

既存のマークアップを使用して、リンクを右側に配置し、次を使用して親要素の幅を維持できます。 justify-content: flex-end;

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

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

要素をフロートしたい場合、これを取り除く一般的な方法は、ナビゲーションを別の要素に持ち、代わりに親要素に境界線を適用することです

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

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]