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以删除内嵌元素的空间特征
现在将initial

item_li

见下面的演示：

#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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用display：inline-block加入<div>？

2 个答案: