¿Cómo puedo unirme a con display: inline-block?

Estoy desarrollando una aplicación compleja y necesito usar div para representar cierta información; No hay table Mi problema específico es cuando la información de la caja se organiza, el contenido se separa.

Este es mi código:

 #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

Me gustaría transformar mi representación como en la siguiente imagen:

introduzca la descripción de la imagen aquí

¡Gracias!

Una de las cosas que puedes hacer es:

  1. Establezca font-size: 0 para item_ul para eliminar la característica de espacio de los elementos en línea

  2. Ahora restablece el tamaño de fuente a initial para el item_li

Vea la demostración a continuación:

 #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
 #content { white-space: nowrap; } #item1 { width: 500px; } #item2, #item3 { width: 400px; } .item_ul { list-style-type: none; white-space: nowrap; overflow-x: auto; display: flex; } .item_li_first { display: inline-block; border-top: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; } .item_li { display: inline-block; border-top: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 0px solid black; } 
    Question    
  • a
  • b
  • c