我如何加入 <div> 与 display: inline-block？

Question

我正在开发一个复杂的应用程序，我需要使用 div 来表示一些信息；否 table。我的具体问题是盒子的信息整理的时候，内容是分开的。

这是我的代码：

#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>

我想将我的表示转换为下一张图片：

谢谢！

Answer 1

您可以做的事情之一是：

设置font-size: 0为item_ul去除space特性inline 元素
现在将 item_li

initial

参见下面的演示：

#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>

另一种选择是在标记中使用 （是的，你是对的，将所有 li 写在单行中）- 参见演示以下：

#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>

Answer 2

#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>

我如何加入 <div> 与 display: inline-block？

How I can join <div> with display: inline-block?

html

css

whitespace

list

overflow