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">吗？

https://jsfiddle.net/n7t5kaLu/

的Se代码

.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，而不是从正常流程中删除元素：

＆＃13;

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

＆＃13;

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

＆＃13;

带有额外列

1 个答案: