CODEWITHSUNDEEP
css
Tyler Zika
Tyler Zika

Reputation: 1224

make ul float right but still have bottom border take up whole page

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

When you make it float right the border only takes up a tiny part of the page. Not sure what my options are to maintain the bottom border and still float right.

Upvotes: 1

Views: 158

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

Using your existing markup, you can put the links on the right and maintain the parent element's width by using 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>

If you want to float the element, a common way to pull this off is to have the nav in another element and apply the border to the parent element instead 

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>

Upvotes: 1

Related Questions