Question

当我点击按钮时，ul左侧会添加一些文字。

我的p位于页面右侧，随着更多文本（行）的添加，它会向下移动。我希望它留在那里。我应该添加什么代码？

    <ul id="elementlist">
    </ul>

    <button onclick="addWater()"> Add Water  </button>
    <button onclick="addFire()"> Add Fire  </button>



    <div style="float:right;">
    <p>aaaa</p>
    </div>
<script type="text/javascript">



function addWater() {
    var node = document.createElement("LI");
    var textnode = document.createTextNode("Water");
    node.appendChild(textnode);
    document.getElementById("elementlist").appendChild(node);
}

function addFire() {
    var node = document.createElement("LI");
    var textnode = document.createTextNode("Fire");
    node.appendChild(textnode);
    document.getElementById("elementlist").appendChild(node);
}




</script>

Answer 1

将<p>标记包含在自定义div中并将position: fixed应用到该div中，并调整top和right以使其正常工作。

＆＃13;

.custom-pos {
   position: fixed;
   right: 2%;
   top: 0;
}

＆＃13;

<ul id="elementlist">
</ul>

<button onclick="addWater()"> Add Water  </button>
<button onclick="addFire()"> Add Fire  </button>



<div class="custom-pos">
<p>aaaa</p>
</div>

＆＃13;

Answer 2

您可以按照建议使用固定（或绝对）位置，或者你可以使用flexbox实现相同的功能，如果你可以避免支持旧的浏览器：

＆＃13;

function addWater() {
  var node = document.createElement("LI");
  var textnode = document.createTextNode("Water");
  node.appendChild(textnode);
  document.getElementById("elementlist").appendChild(node);
}

function addFire() {
  var node = document.createElement("LI");
  var textnode = document.createTextNode("Fire");
  node.appendChild(textnode);
  document.getElementById("elementlist").appendChild(node);
}

＆＃13;

html,
body {
  margin: 0;
  overflow: hidden;
  height: 100%;
}
.container {
  overflow: hidden;
  height: 100%;
  display: flex;
}
.content {
  padding: 5px;
  flex: 1;
  overflow: auto;
}
.sidebar {
  padding: 5px;
  flex: 0;
}

＆＃13;

<div class="container">
  <main class="content">
    <ul id="elementlist">
    </ul>
    <button onclick="addWater()">Add Water</button>
    <button onclick="addFire()">Add Fire</button>
  </main>
  <div class="sidebar">
    <p>aaaa</p>
  </div>
</div>

＆＃13;

希望p保持在同一个位置

2 个答案: