Question

如何使水平线穿过滑块，如下图所示：（https://www.audiolabs-erlangen.de/resources/webMUSHRA）

此外应该如何完成这种类型的界面（例如固定高度或百分比）。它应该基于表吗？目前我有这样的基于磁通布局（angular2-flex）的东西，但我不知道如何制作这些水平线。

代码：

 <div class="flex-item hmax-percentage" fx-flex="80">
                        <div class="flex-container hmax-percentage" fx-layout="row" fx-layout-align="center stretch">
                            <div class="flex-item">
                                <div class="flex-container" fx-layout="column"
                                     fx-layout-align="space-around stretch" style="height:80%">
                                    <pre class="flex-item" fx-flex="20"> 80-100 - Excellent</pre>
                                    <pre class="flex-item" fx-flex="20">  60-80 - Good</pre>
                                    <pre class="flex-item" fx-flex="20">  40-60 - Fair</pre>
                                    <pre class="flex-item" fx-flex="20">  20-40 - Poor</pre>
                                    <pre class="flex-item" fx-flex="20">   0-20 - Bad</pre>
                                </div>
                            </div>
                            <template ngFor let-sample [ngForOf]="samplesKeyMap">
                                <sample-slider class="flex-item hmax-percentage" [sampleKey]="sample.currentSampleKey"
                                               (onChangeEvent)="onSampleSliderChangeHandler($event)"
                                               (onButtonClick)="onSampleSelectToPlay($event)"></sample-slider>
                            </template>
                        </div>
                    </div>

Plunker：http://plnkr.co/edit/G4RK8T4OMPzs1E0Gcoaj?p=preview

Answer 1

我使用div（高度：2px;背景颜色：黑色;宽度：100％;）实现了网格水平线，具有绝对定位和百分比顶部平移。在我的情况下，有5行，我的滑块容器高度为90％，因此平移因子为90/5 = 16％。

<div class="flex-container hmax-percentage" fxLayout="row" fxLayoutAlign="center stretch">

  <div style="position: relative; height:100%;" class="fx-flex">

    <div style="position: absolute; top:0%; width: 100%; height:2px; background-color:black;">
    </div>
    <div style="position: absolute; top:16%; width: 100%; height:2px; background-color:black;">
    </div>
    <div style="position: absolute; top:32%; width: 100%; height:2px; background-color:black;">
    </div>
    <div style="position: absolute; top:48%; width: 100%; height:2px; background-color:black;">
    </div>
    <div style="position: absolute; top:64%; width: 100%; height:2px; background-color:black;">
    </div>
    <div style="position: absolute; top:80%; width: 100%; height:2px; background-color:black;">
    </div>

    <div class="flex-container hmax-percentage" fxLayout="row" fxLayoutAlign="center stretch">

      <template ngFor let-sample [ngForOf]="samplesKeyMap">
        <sample-slider class="flex-item hmax-percentage"></sample-slider>
      </template>
    </div>
  </div>

演示： https://plnkr.co/edit/t1OL23PZcTgTE9DoSfLY?p=preview

如何使水平线穿过其他元素？

1 个答案: