html - 带有额外列的列表

Question

(对不起我的英语不好)

我有一个带有描述列的多级列表(请参见下面的示例)

这很好用，但是如果描述必须在多行上，文本就会覆盖在长描述下面的内容上。

有什么办法可以解决吗？如果描述需要多行，我希望下面的行向下移动，这样描述就可以在不覆盖任何文本的情况下适应。

(我使用列表的原因是因为我使用来自维基百科的 Template:Tree_list)

编辑:See here以维基百科为例:

源码见下:

.description {
  position: absolute;
  left: 200px;
}

<li><span class="content">row1</span><span class="description">Description1</span></li>
<li><span class="content">row2</span><span class="description">Description2.  The description can be long, and need to be on multiple lines. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span></li>
<li><span class="content">row3</span><span class="description">Description3</span>
  <ul>
    <li><span class="content">row3.1</span><span class="description">Description3.1</span></li>
    <li><span class="content">row3.2</span><span class="description">Description3.2</span>
  </ul>
  <li><span class="content">row4</span><span class="description">Description4</span></li>
  </ul>

编辑

我做了一些实验，并想出了这个(我从 wikipedia 借用了“树列表”的 CSS。我离完美的解决方案越来越近了，但它仍然存在一些问题。

• 描述栏未完全对齐。宽度的计算有什么问题？
• html代码很复杂，我能把它弄得更干净吗？
• 我能以任何方式搭乘 <div class="line"> 吗？ ？

Se 代码位于 https://jsfiddle.net/n7t5kaLu/

.treeview .row {
  display: flex;
}

.treeview li .left {
  width: 200px;
  display: flex;
  flex-direction: column;
}

.treeview li li .left {
  width: calc(200px - 20px - 0.3em);
}

.treeview li li li .left {
  width: calc(200px - 40px - 0.6em);
}

.treeview li li li li .left {
  width: calc(200px - 60px - 0.9em);
}

.treeview li li li li li .left {
  width: calc(200px - 80px - 1.2em);
}

.right {
  width: 100%;
  text-indent: 0;
}

.treeview ul {
  padding: 0;
  margin: 0;
  width: 100%;
}

.treeview li {
  padding: 0;
  margin: 0;
  list-style-type: none;
  list-style-image: none;
}

.treeview .line {
  background: url(//upload.wikimedia.org/wikipedia/commons/f/f2/Treeview-grey-line.png) no-repeat 0 -3px;
  height: 100%
}

.treeview li li {
  background: url(//upload.wikimedia.org/wikipedia/commons/f/f2/Treeview-grey-line.png) no-repeat 0 -2981px;
  padding-left: 20px;
  text-indent: 0.3em;
}

.treeview li li.lastline {
  background-position: 0 -5971px
}

.treeview li.emptyline > ul {
  margin-left: -1px
}

.treeview li.emptyline > ul > li:first-child {
  background-position: 0 9px
}

<div class="treeview">
  <ul>
    <li>
      <div class="row">
        <div class="left">
          root
          <div class="line"></div>
        </div>
        <div class="right">
          - Description
        </div>
      </div>
      <ul>
        <li>
          <div class="row">
            <div class="left">
              row 1
              <div class="line"></div>
            </div>
            <div class="right">
              - Description XXXXKJXLKXJKJXLKJXLKJX LKXJXL K J X L K X J K X J X L A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Å Ä Ö
            </div>
          </div>
          <ul>
            <li class="lastline">
              <div class="row">
                <div class="left">
                  row 1.1
                  <div class="line"></div>
                </div>
                <div class="right">
                  - Description XXXXKJXLKXJKJXLKJXLKJX LKXJXLKJXLKXJ KXJXL
                </div>
              </div>
              <ul>
                <li class="lastline">
                  <div class="row">
                    <div class="left">
                      row1.1.1
                      <div class="line"></div>
                    </div>
                    <div class="right">
                      - Description kföljlkdsj fjfskjf kjflksf
                    </div>
                  </div>
                  <ul>
                    <li class="lastline">
                      <div class="row">
                        <div class="left">
                          row1.1.1.1
                          <div class="line"></div>
                        </div>
                        <div class="right">
                          - Description kföljlkdsj fjfskjf kjflksf
                        </div>
                      </div>
                    </li>
                  </ul>
                </li>

              </ul>
            </li>
          </ul>
        </li>
        <li class="lastline">
          <div class="row">
            <div class="left">
              row1XXXX
            </div>
            <div class="right">
              - DescriptionXXXXXXXX
            </div>
          </div>
        </li>
      </ul>
    </li>
    <!--root-->
  </ul>
</div>

Answer 1

当您将 position: absolute 应用于元素时，您将其从正常流程中移除。这意味着它不会占用布局中的任何空间。

这就是周围元素与绝对定位元素 (.description) 重叠的原因:它们甚至不知道它的存在。

代替 position: absolute 尝试 position: relative，它不会从正常流中删除元素:

.description {
  position: relative;
  left: 200px;
}

<ul>
  <li>
    <span class="content">row1</span>
    <span class="description">Description1</span>
  </li>
  <li>
    <span class="content">row2</span>
    <span class="description">Description2.  The description can be long, and need to be on multiple lines. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span>
  </li>
  <li>
    <span class="content">row3</span>
    <span class="description">Description3</span>
    <ul>
      <li>
        <span class="content">row3.1</span>
        <span class="description">Description3.1</span>
      </li>
      <li>
        <span class="content">row3.2</span>
        <span class="description">Description3.2</span>
      </li>
    </ul>
    <li><span class="content">row4</span><span class="description">Description4</span></li>
</ul>