在一个坚实的40分钟后，我找不到我的答案在谷歌，我试图使一个简单的方式为我写标签吉他，并希望音符是可见的左边。IE:
E
A
D
G
B
E
和弦
我的代码:
<div class="Tab">
<ol type="E, A, D, G, B, e, Chord">
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
</ol>
我知道这里一团糟我只是需要命令才能工作。。。
我不确定是否可以使用HTML和amp；因为它们有一组预定义的计数器。即使是计数器，你也不能自定义一个。您可以做的是，使用CSS::before伪元素和:nth-child()可以实现您想要实现的功能:
null
.guitar li {
list-style: none;
}
.guitar li::before {
display: inline-block;
width: 50px;
text-align: right;
font-size: 0.85em;
padding-right: 10px;
}
.guitar li:nth-child(8n + 1)::before {
content: "E";
}
.guitar li:nth-child(8n + 2)::before {
content: "A";
}
.guitar li:nth-child(8n + 3)::before {
content: "D";
}
.guitar li:nth-child(8n + 4)::before {
content: "G";
}
.guitar li:nth-child(8n + 5)::before {
content: "B";
}
.guitar li:nth-child(8n + 6)::before {
content: "e";
}
.guitar li:nth-child(8n + 7)::before {
content: "Chord";
}<ol class="guitar">
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
</ol>
只需使用标签元素
null
.Tab ol {
list-style-type: none;
padding-left: 0;
}
.Tab label {
display: inline-block;
width: 3em;
}<div class="Tab">
<ol>
<li><label for="t-E">E</label><input type="text" id="t-E" name="Tab line" placeholder="-"></li>
<li><label for="t-A">A</label><input type="text" id="t-A" name="Tab line" placeholder="-"></li>
<li><label for="t-D">D</label><input type="text" id="t-D" name="Tab line" placeholder="-"></li>
<li><label for="t-G">G</label><input type="text" id="t-G" name="Tab line" placeholder="-"></li>
<li><label for="t-B">B</label><input type="text" id="t-B" name="Tab line" placeholder="-"></li>
<li><label for="t-e">e</label><input type="text" id="t-e" name="Tab line" placeholder="-"></li>
<li><label for="t-C">Chord</label><input type="text" id="t-C" name="Tab line" placeholder="-"></li>
</ol>
CSS变量可以在此提供帮助:
null
ol li::before {
content: "-" var(--list) " " var(--list) " " var(--list) " " var(--list); /* as much as possible */
position: absolute;
width: 0;
right: calc(100% + 5px);
height:100%;
line-height:21px; /* you need to make this equal to the height*/
direction: rtl;
transform:translateY(calc(var(--p)*-100%))
}
/* you can easily generate the below using SASS/LESS */
ol li:nth-child(1)::before {--p:1}
ol li:nth-child(2)::before {--p:2}
ol li:nth-child(3)::before {--p:3}
ol li:nth-child(4)::before {--p:4}
ol li:nth-child(5)::before {--p:5}
ol li:nth-child(6)::before {--p:6}
ol li:nth-child(7)::before {--p:7}
ol li:nth-child(8)::before {--p:8}
ol li:nth-child(9)::before {--p:9}
/* ol li:nth-child(N)::before { --p:N}*/
ol {
overflow:hidden;
}
ol li {
list-style: none;
margin-left: 100px;
position: relative;
clip-path: polygon(-100vw 0%, 100% 0, 100% 100%, -100vw 100%); /* hide the overflow and show only one line */
}<ol style="--list:'E A D G B e Chord';">
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
</ol>
<ol style="--list:'1 3 OK C e hello';">
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
<li><input type="text" name="Tab line" placeholder="-"></li>
</ol>