在div之外浮动文本？答案

【问题标题】：Float text outside of div?在div之外浮动文本？
【发布时间】：2018-10-01 21:17:17
【问题描述】：

我正在尝试修改这个 W3Schools 示例：

function move() {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
  <div id="myBar">10%</div>
</div>
<br>
<button onclick="move()">Click Me</button>

（代码来自https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_label_js）

以便进度条的文本（% 值）在条中居中，并保持居中，而不是让它与进度 div 一起“移动”。

如何让文本显示在 div 之外？

【问题讨论】：

div 的意义在于将元素保存在容器中。如果您不希望文本与移动条 div 一起出现，为什么不将其设为单独的 div？

标签： javascript html css

【解决方案1】：

您需要添加一个绝对元素（#center），它具有相同的宽度（left: 0;right: 0; 以拉伸到#myBar 大小）和行高（line-height: 30px，因此文本与#myBar 垂直对齐) 的背景栏 (#myBar) ，居中他的文本 (text-aling: center)，然后更改内部文本作为进度条 (#myProgress) 的宽度增加使用 javascript (center.innerHTML = width * 1 + '%';)

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

#center{
position:absolute;
left: 0;
right: 0;
text-align:center;
line-height: 30px;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
<div id='center'>10%</div>
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 

<script>
function move() {
  var elem = document.getElementById("myBar");
  var center = document.getElementById("center");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      center.innerHTML = width * 1  + '%';
    }
  }
}
</script>

</body>
</html>

【讨论】：

我建议解释一下发生了什么变化以及为什么你所做的工作有效。

【解决方案2】：

<!DOCTYPE html>
<html>
  <style>
    #myProgress {
      position: relative;
      width: 100%;
      background-color: #ddd;
    }

    #myBar {
      width: 10%;
      height: 30px;
      background-color: #4CAF50;
      text-align: center;
      line-height: 30px;
      color: white;
    }

    #percentage {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 5px;
      height: 1em;
      margin: auto;
    }

  </style>

  <body>

    <h1>JavaScript Progress Bar</h1>

    <div id="myProgress">
      <div id="myBar"></div>
      <p id="percentage">10%</p>
    </div>


    <br>
    <button onclick="move()">Click Me</button>

    <script>
      function move() {
        var elem = document.getElementById("myBar");
        var percentage = document.getElementById("percentage")
        var width = 10;
        var id = setInterval(frame, 10);

        function frame() {
          if (width >= 100) {
            clearInterval(id);
          } else {
            width++;
            elem.style.width = width + '%';
            percentage.innerHTML = width * 1 + '%';
          }
        }
      }

    </script>

  </body>

</html>

应该这样做。

#myProgress 具有相对位置，#percentage 居中。

【讨论】：

【解决方案3】：

您需要为 js 中的 innerHTML 调用创建另一个 div 元素。对于样式，我创建了一个父 div，只是为了确保它显示在栏的同一位置，并且我创建了具有居中样式的百分比 div。

function move() {
  var elem = document.getElementById("myBar"); 
  var percent = document.getElementById("percent"); 
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      percent.innerHTML = width * 1  + '%';
    }
  }
}

#myProgress {
  width: 100%;
  background-color: #ddd;
  position: relative;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;

}

.parentBlock{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#percent {
 margin: 0 auto;
 display: block;
 width:30px;
 background: red;
 top: 5px;
 position: relative;
}

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div class="parentBlock"><div id="percent">10%</div></div>
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 
</body>
</html>

【讨论】：

【解决方案4】：

不确定这是否最佳，但这里有一个解决方案。基本上，您必须浮动两个 div 并将进度条绝对定位到 myBar div 的中心。

<!DOCTYPE html>
<html>
<style>
#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  float: left;
}

#myBarText {
  float: left;
  position: absolute;
  margin-top: 5px;
  margin-left: 40%;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"></div>
  <div id="myBarText">10%</div>
  <div style="clear: both"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 

<script>
function move() {
  var elem = document.getElementById("myBar");
  var elem2 = document.getElementById("myBarText");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem2.innerHTML = width * 1  + '%';
    }
  }
}
</script>

</body>
</html>

【讨论】：

【解决方案5】：

这是一个在外面制作的例子。

function move() {
  var elem = document.getElementById("myBar");  
  var ptext = document.getElementById("ptext"); 
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      ptext.innerHTML = width * 1  + '%';
    }
  }
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  position: relative;
  margin-bottom: 10px;
}

#myBar span {
    position: absolute;
    bottom: -26px;
    color: #000;
    right: 15px;
}

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"><span id="ptext">10%</span></div>
</div>

<br>
<button onclick="move()">Click Me</button>

【讨论】：

【解决方案6】：

在编写示例时，您将无法做到这一点，因为文本没有单独的容器而不是调整大小的 div。如果它有自己的元素，比如 p 标签，你可以这样做：

#myBar p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

#myProgress {
  position: relative;
}

这将使文本的位置相对于#myBar 的父容器，而不是#myBar 本身。 50% 样式是一种将绝对定位元素居中的简单方法。但就像我说的，这需要你将文本放在不同的容器中。然后，您需要修改 js 以更改 p 标签的文本，而不是 elem：

function move() {
  var elem = document.getElementById("myBar");
  var text = document.querySelector('#myBar p');

  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      text.innerHTML = width * 1  + '%';
    }
  }
}

【讨论】：

【解决方案7】：

与其他人类似，但我让它从 0 而不是 10 开始：

function move() {
  var elem = document.getElementById("myBar");
  var textAboveBar =document.getElementById("aboveBar");
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      textAboveBar.innerHTML = width * 1  + '%';
    }
  }
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

#aboveBar{
    text-align:center;
}

<h1>JavaScript Progress Bar</h1>
<div id = "aboveBar">0%</div>
<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button>

【讨论】：

【解决方案8】：

不接触HTML结构，只在span标签中包围“%值”，并给它一个ID，例如'值'。通过将position: relative 添加到div#myProgress（div#myBar MUST NOT 没有应用任何position 规则，否则这将无法按您的需要工作）并通过absolute 定位span#value 你会实现你的目标。

这是一个演示：

function move() {
  var elem = document.getElementById("myBar");
  var value = document.getElementById("value");
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      value.textContent = width * 1  + '%';
    }
  }
}

#myProgress {
  position: relative; /* must be added here */
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
/* centering the span#value */
#value {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
  <div id="myBar"><span id="value">10%</span></div>
</div>
<br>
<button onclick="move()">Click Me</button>

希望我把你推得更远。

【讨论】：