div中的背景颜色宽度

Question

我的问题可能有一个简单的答案，但我无法弄清楚。

我想要实现的目标：我正试图获得一个小方框，当该页面处于活动状态时，它会显示在导航按钮的左侧，它会显示一个彩色框。我非常糟糕地画出了我想要它的样子：P。

但是我希望盒子适合div，所以我不必自己定位，但我可以将宽度改为我想要的尺寸。

我尝试过这样做但我找不到改变div宽度的方法。

我知道我可能不得不将它与li标签分开，但我不想让它定位。

HTML CODE

<div class="sidebar">
                <nav id="nav">
                    <h2><?php echo $msg[$lang]["menu"]; ?></h2>
                    <ul>
                        <li><a href="index.php" class="active"><i class="fa fa-play" style="padding-right: 19px;"></i> <?php echo $msg[$lang]["mainpage"]; ?></a></li>
                        <li><a href="history.php"><i class="fa fa-history" style="padding-right: 19px;"></i><?php echo $msg[$lang]["history"]; ?></a></li>
                        <li><a href="top.php"><i class="fa fa-star" style="padding-right: 19px;"></i><?php echo $msg[$lang]["top"]; ?></a></li>
                    </ul>
                </nav>

干杯，

-framework

Answer 1

对于您想要着色的每个div，添加style="background-color:#cdcdcd"。

将#cdcdcd替换为您想要的HTML颜色代码。 Click here for color codes

修改

我意识到我错误地读了你的问题。在div中尝试：

<div style="background-color:#cdcdcd; width: 20px; height: 100%"></div>

编辑2：

看看这个JSFiddle