Question 246447 in CSS Question posted in
Some basic documentation can be found here.

Css – How to style elements to overlap per container width (to look like tabs)?

I have a list of items that are styled to display in a row, with each one overlapping the other slightly, to look like tabs. Using only CSS (no JS), I would like the overlap to change responsively to the window width, such that when the window decreases in width, the overlap of each list item becomes greater. How can this be accomplished?

Below is simplified example code. I’m accomplishing the overlap via negative margin, but if there’s a better way, I’m open to it. How can I write a calc() function (or use some other method) to do this? Or should I be using flexbox or grid-template-columns somehow instead?

li {
  background-color  : orange;
  border            : 5px dashed red;
  box-sizing        : border-box;
  display           : inline-block;
  font-size         : 20px;
  height            : 100%;
  line-height       : 30px;
  opacity           : 0.75;
  position          : relative;
  width             : 100px;
  margin            : 0;
  margin-right      : -10px;
  /* 
-15px;      This would make a greater overlap, but I want it to be responsive to the container width.
calc(100%); How can something like that be calculated?
  */
  }
ul {
  background  : brown;
  box-sizing  : border-box;
  font-size   : 0;
  height      : 40px;
  margin      : 0;
  overflow    : hidden;
  padding     : 0;
  position    : relative;
  text-align  : center;
  white-space : nowrap;
  width       : 100%;
  }
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
</ul>

Here is a Codepen for your sandbox editing if helpful: https://codepen.io/jtheletter/pen/vYveLZJ

Tags:

2

Answers


  1. 0

    something like that, for your calculation?

    ul > li {
  display          : inline-block;
  background-color : whitesmoke;
  border           : 1px solid black;
  border-radius    : 1em;
  width            : 4em;
  height           : 2em;
  line-height      : 2em;
  padding          : 0 .7em;
  margin           : 0 0 0 calc( -60px - ( 4vw * -1 ));
  list-style       : none;
  }
    <ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
</ul>
    Login or Signup to reply.
  2. 0

    You where so close, the thing is you need to calculate how much you want the overlap:

    Try:
    margin-right: calc(10% – 100px);

    ul {
  position: relative;
  background: gray;
  font-size: 0;
  height: 40px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  width: 100%;
}

li {
  background-color: rgba(255, 0, 255, 0.2);
  border: 5px dashed red;
  box-sizing: border-box;
  display: inline-block;
  font-size: 20px;
  height: 100%;
  line-height: 30px;
  margin: 0;
  margin-right: calc(10% - 100px);
  position: relative;
  width: 100px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search