小编Fab*_*iyi的帖子

响应树图

我正在尝试在桌面和移动设备上制作响应式组织结构图，但我的代码遇到了问题。我的图表超出了屏幕的大小，并且不显示滚动来查看图表的其余部分，如下图所示。有没有办法将我的图表放在引导容器中，并且是否有一个 css 框架可以更轻松地制作图表？

这是使用的 css 代码以及 html 代码

.tree,
.tree ul,
.tree li {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.tree {
  margin: 0 0 1em;
  text-align: center;
}

.tree,
.tree ul {
  display: table;
}

.tree ul {
  width: 100%;
}

.tree li {
  display: table-cell;
  padding: .5em 0;
  vertical-align: top;
}

.tree li:before {
  outline: solid 1px #666;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tree li:first-child:before {
  left: 50%;
} …

Run Code Online (Sandbox Code Playgroud)

html css diagram responsiveness

Fab*_*iyi

2020 03-03

0
推荐指数

1
解决办法

2354
查看次数