Question

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

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

然而，当我这样做时，我设定了＆＃34;＆＃34;身高＆＃34;到100％，它仍然认为自己是一个水平元素，并且变得等于父元素的宽度，而不是高度。

此外，容器元件的宽度似乎被仪表杆的高度拉伸，因此也创造了所有这些＆＃34;额外的衬垫＆＃34;在仪表栏的右侧。似乎旋转变换似乎在它的中心位于仪表栏上，并且它在包含div时似乎并未确定它在确定它时的新位置。自己的界限。考虑仪表栏的红色边界和父容器的绿色......红色的米条只有一半在里面！我想我需要将它的位置设置为亲戚，然后调整它的顶部＆＃39;并且＆＃39;离开＆＃39;属于＆＃34;假的＆＃34;它看起来＆＃34;内部＆＃34;容器，但后来我遇到的问题是确定我需要多少设置这些值才能适用于所有情况（而不仅仅是这个）。

我想要一些兼容的跨浏览器并且严格地涉及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 */
}

如何创建一个垂直进度/米栏，动态调整到它的父容器

0 个答案: