How I can join with display: inline-block? [duplicate]

Answer 1

One of the things that you can do is:

1. Set font-size: 0 for item_ul to remove the space characteristic of inline elements

2. Now reset the font-size to initial for the item_li

See demo below:

#content {
  white-space: nowrap;
}
#item1 {
  width: 500px;
}
#item2,
#item3 {
  width: 400px;
}
#item_ul {
  list-style-type: none;
  white-space: nowrap;
  overflow-x: auto;
  font-size: 0;
}
.item_li {
  border: solid 1px black;
  display: inline-block;
  font-size: initial;
}

  

    

      a
    
    

      b
    
    

      c
    
  

Another option is to use in the markup (and yes you are right write all the li in a single line) - see demo below:

#content {
  white-space: nowrap;
}
#item1 {
  width: 500px;
}
#item2,
#item3 {
  width: 400px;
}
#item_ul {
  list-style-type: none;
  white-space: nowrap;
  overflow-x: auto;
}
.item_li {
  border: solid 1px black;
  display: inline-block;
}

  

    

      a
    

      b
    

      c