如何在 CSS 的一侧画一条带矩形的中心线

Question

我在造型方面是个新手。

我有一个网络应用程序（使用 GWT 构建），我在其中显示结果网格，并且在一列中，我想显示分数的可视化，其中有一条中心黑线，或者右侧的绿色矩形表示正分，左侧的红色矩形表示负分。矩形的大小表示分数的值。是这样的：

我有一个 div 用于整个单元格；我想我需要做的是添加两个子div，以某种方式绘制中心线，然后将矩形添加到适当的div。我对如何做这一切感到有点困惑。

我有这个：

 @Override
        public SafeHtml getValue(SearchResult value) {
            SafeHtmlBuilder sb = new SafeHtmlBuilder();

            float ratio = value.getRatio();

            sb.appendHtmlConstant("<div style='width: 100%; height: 100%; position: relative;'>");

            if (ratio > 0) { 
                sb.appendHtmlConstant("<div style='position: absolute; left: 0; top: 0; width: 100%; z-index: 1'><div style='display: inline; float: left; width: "
                        + ratio
                    + "%; height: 20px; background-color: #82cd80;'></div>");
            }
            else {
            sb.appendHtmlConstant("<div style='display: inline; float: right; width: "
                    + ratio
                    + "%; height: 20px; background-color: #c54c4d;'></div>");
            }
            sb.appendHtmlConstant("</div>");
            sb.appendHtmlConstant("</div>");
            return sb.toSafeHtml();
        }

但它什么也没画。我很困惑。

Answer 1

每个图表应该有两个 div。一个围绕整个图表（如封面），而另一个只是围绕图表的条形图本身。封面是你如何得到你的台词。在其上设置边框，使其看起来像这样：

border-right: 2px solid color;

（另一张图只做左边框）
现在我不确定你在使用什么，因为我从未使用过 "SafeHtml" 但看起来它一直在使用基本的 HTML 功能所以只要你知道把它放在哪里这应该没事。

如何在 CSS 的一侧画一条带矩形的中心线

How to draw a centered line with a rectangle to one side in CSS

html

css

gwt