1

I am developing a complex application and I need to use div for representing some information; NO table. My specific problem is when the box's information is organized, the content is separated.

This is my code:

#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;
}
<div id="content" style="overflow:scroll">
  <ul id="item_ul">
    <li id="item1" class="item_li">
      a
    </li>
    <li id="item2" class="item_li">
      b
    </li>
    <li id="item3" class="item_li">
      c
    </li>
  </ul>
</div>

I would like transform my representation as in the next image:

enter image description here

Thank you!

kukkuz
  • 41,512
  • 6
  • 59
  • 95
Juan Camacho
  • 736
  • 2
  • 7
  • 15

2 Answers2

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;
}
<div id="content" style="overflow:scroll">
  <ul id="item_ul">
    <li id="item1" class="item_li">
      a
    </li>
    <li id="item2" class="item_li">
      b
    </li>
    <li id="item3" class="item_li">
      c
    </li>
  </ul>
</div>

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;
}
<div id="content" style="overflow:scroll">
  <ul id="item_ul">
    <li id="item1" class="item_li">
      a
    </li><!--
    --><li id="item2" class="item_li">
      b
    </li><!--
    --><li id="item3" class="item_li">
      c
    </li>
  </ul>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
1

#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;
}
<!DOCTYPE html>
<html>

<head>
  <title>Question</title>
  <style type="text/css">
  </style>
</head>

<body>
  <div id="content" style="overflow:scroll">
    <ul class="item_ul">
      <li id="item1" class="item_li_first">
        a
      </li>
      <li id="item2" class="item_li">
        b
      </li>
      <li id="item3" class="item_li">
        c
      </li>
    </ul>
  </div>
</body>

</html>
Janaka Dissanayake
  • 537
  • 4
  • 13