如何更改投票/进度条的颜色？答案

【问题标题】：How to I change the color of my poll/progress bar?如何更改投票/进度条的颜色？
【发布时间】：2020-06-08 10:03:17
【问题描述】：

我进行了一项民意调查，其中显示了民意调查结果的两个进度条（以百分比表示）。我想更改进度/投票栏的颜色并将它们的位置居中在页面上。为了使投票结果居中，我尝试使用'text-align：center;'但它没有用。

当提出投票问题时，它以页面为中心：但是当投票栏结果出现时，它位于左侧：

我也尝试更改进度条的颜色，但到目前为止没有任何效果，它只是保持蓝色。

如果您有任何使投票结果居中或更改投票/进度条颜色的解决方案，请提供帮助：)

HTML：

<script>
                    function getVote(int) {
                    var xmlhttp=new XMLHttpRequest();
                    xmlhttp.onreadystatechange=function() {
                        if (this.readyState==4 && this.status==200) {
                        document.getElementById("poll").innerHTML=this.responseText;
                        }
                    }
                    xmlhttp.open("GET","poll/study_vote.php?vote="+int,true);
                    xmlhttp.send();
                    }
                </script>

                <div id="poll">
                    <h2>When studying, do you often find yourself procrastinating?</h2>
                    <form>
                    Yes: <input type="radio" name="vote" value="0" onclick="getVote(this.value)"><br>
                    No: <input type="radio" name="vote" value="1" onclick="getVote(this.value)">
                    </form>
                </div>
</script>

PHP：

<?php
$vote = $_REQUEST['vote'];

//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];

if ($vote == 0) {
  $yes = $yes + 1;
}
if ($vote == 1) {
  $no = $no + 1;
}

//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);

$yesProgress = 100*round($yes/($no+$yes),2);
$noProgress = 100*round($no/($no+$yes),2);

?>

<h2>Result:</h2>
<table>
    <tr>
        <td>Yes:</td>

        <td>
        <progress id="file" max="100" value="<?= $yesProgress ?>">
            <?= $yesProgress ?>
        </progress>
        <?= $yesProgress ?>%
        </td>
    </tr>
    <tr>
        <td>No:</td>
        <td>
        <progress id="file" max="100" value="<?= $noProgress ?>">
            <?= $noProgress ?>
        </progress>
        <?= $noProgress ?>%
        </td>
    </tr>
</table>

【问题讨论】：

您的进度条容器需要设置为display:inline-block，然后才能使用text-align:center。
stackoverflow.com/questions/40769403/…

标签： javascript php html jquery css

【解决方案1】：

尝试做：

<div class="div_center_table">
  <table>
    <tr>
      <td>Yes:</td>
      <td>
        <progress id="file" max="100" value="<?= $yesProgress ?>">
          <?= $yesProgress ?>
        </progress>
        <?= $yesProgress ?>%
      </td>
    </tr>
    <tr>
      <td>No:</td>
      <td>
        <progress id="file" max="100" value="<?= $noProgress ?>">
          <?= $noProgress ?>
        </progress>
        <?= $noProgress ?>%
      </td>
    </tr>
  </table>
</div>

在你的 CSS 文件中：

div_center_table{
  width: 50%;
  margin-left: 25%;
}

【讨论】：