0

我有一个块，它会根据用户决定放入多少内容而采取不同的高度。在左侧的块内，我想放置一个垂直进度/计量条，它从包含块的顶部到底部运行全长，无论其大小如何，并显示一些值。

我目前的方法是使用一个元素并使用 transform 属性旋转它（根据这里的答案：Is It possible to Create a Vertical Meter With HTML5?）。这是我的 JS 小提琴：http: //jsfiddle.net/zt98w/2/

然而，当我这样做时，我将“高度”设置为 100%，它仍然认为自己是一个水平元素，并且等于父元素的宽度，而不是高度。

此外，容器元素的宽度似乎被仪表栏的高度拉伸，因此也会在仪表栏的右侧创建所有这些“额外填充”。似乎旋转变换似乎从它的中心作用在仪表条上，并且它包含的 div 在确定它自己的边界时似乎没有使其新位置生效。考虑仪表条的红色边界和父容器的绿色……红色仪表条只有一半在里面！我想我需要将它的位置设置为相对，然后调整它的“顶部”和“左侧”属性以“假”它看起来“内部”容器，

我想要一些兼容跨浏览器并且严格涉及 css 和 html（不是 JavaScript）的东西，所以这里提出的解决方案不起作用：CSS Vertical Progress Bar）

有什么想法吗？

HTML：

<form>

    <meter min="1" max="5" value="2"></meter>
    <label> Task 1</label>
        <br>
    <label> Task 2</label>
        <br>
    <label> Task 3</label>
        <br>
    <label> Task 4</label>
        <br>
    <label> Task 5</label>
        <br>
    <label> Task 6</label>
        <br>
    <label> Task 7</label>
        <br>
    <label> Task 8</label>
        <br>
    <label> Task ...</label>
</form>

CSS：

form {
    position:absolute;
    margin: 10px;
    border:1px dashed green;
}

meter{
    border:1px dashed red;

    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);


    width:100%;   /* This "width" still assumes that the meter is horizontal and takes         on the width of the form, not the height which is intended */
}
4

0 回答 0