Question

当我单击以阅读更多内容时，右移栏上的文本。我需要他们保持原样。我需要列表左下方的“显示更多”按钮。有什么方法可以通过调整代码来解决此问题。我是Java语言的新手，所以我无法解决这个问题。

(click)="activeModal.dismiss('Cross click')"

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");
  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

 #more {
      display: none;
    }
    
    .columns {
      columns: 2;
      -webkit-columns: 2;
      -moz-columns: 2;
      float: left;
      position: relative;
    }
    
    .hed {
      font-size: 16px;
      font-weight: 800;
      list-style: none;
      margin: 15px 0px 5px;
    }

Answer 1

您的按钮不在所需列表下方的原因是，您的无序列表columns具有float: left。也许column-gap可以达到您想要的外观。

列表项四处移动的原因是因为您的列是自平衡的。一次添加的项目越多，偏移量就越大，您可能会注意到，如果仅替换一项，则各列将保持不变。也许您可以尝试column-fill: auto？ https://www.w3schools.com/cssref/css3_pr_column-fill.asp

单击时查看更多按钮移位文本

1 个答案: