Question

我正在创建一项调查，当用户回答时，他会获得每个答案的百分比水平条。

我的问题是，目前看起来像这样（==是酒吧）：

答案A：======= 50％
回答答案B === 25％
回答C Blabla === 25％

我想让所有的酒吧都从同一点开始。

这是我的代码：

<div class="bloc-result">
Answer A <div class="survey_bar" style="height:15px; margin-left:10px; margin-right:10px; display: inline-block; width:200px; color:white; background:#4AB4E6;" ;=""></div>50%<br>

答案B和C是相似的。

我想拥有解决我问题的CSS专有。我检查了位置＆＃34;绝对＆＃34;但这听起来像是0％响应并且很好用。

Answer 1

您需要做的是将标签包装在另一个标签中，以便为其设置宽度。这是一个例子：

    	.label {
    		width: 100px;
    		display: inline-block;
    	}
    	.bar {
    		display: inline-block;
    		height: 20px;
    		background: black;
    	}
    	.pcent {
    		display: inline-block;
    	}

    <div class="bloc-result">
        <div>
            <div class="label">Answer A</div>
            <div class="bar" style="width:50px;"></div>
            <div class="pcent">50%</div>
        </div>
        <div>
            <div class="label">Answer B</div>
            <div class="bar" style="width:30px;"></div>
            <div class="pcent">30%</div>
        </div>
        <div>
            <div class="label">Answer C</div>
            <div class="bar" style="width:20px;"></div>
            <div class="pcent">20%</div>
        </div>
    </div>

如您所见，该行中的每一行和每个元素都有自己的元素，因此您可以更轻松地对设计进行微调。

此外，这是一个jsFiddle示例： https://jsfiddle.net/zd654roh/

Answer 2

尝试这样的事情：

foreach($aData['Resultat'] as $iKey => $aVal) {
      $sHtml = '<div class="row">
                  <div class="cell">'.$aVal['REPONSE_LIB'].'</div>
                  <div class="cell">
                    <div class="barre_sondage" style="...blah blah..."></div>'.round($aVal['RESULTAT'],2).'%
                  </div>
                </div>';
      echo $sHtml;
}

和CSS：

.row{
  display: table-row;
}
.cell{
  display: table-cell;
}

我还建议你用display: table;

将整个事物包装成div

编辑：你可以用display: inline-block和固定宽度的元素包装答案，但你会失去响应性

将多个元素设置为固定位置

2 个答案: