我正在尝试使用 CSS 网格布局来为具有动态创建的行的“ Controller ”设置样式。我无法正确设置间距。
在我所拥有的情况下， slider 容器不会出现在它们自己的行中(尽管 grid-auto-rows: auto)并且 slider 容器中的内容不会出现在同一行中行(尽管 grid-template-columns: 1fr 2fr 1fr)。第 2 列和第 3 列之间还出现了一些奇怪的意外间距(无论如何都不应该存在)。
最终我想要的是每行包含 1 个标签、1 个 slider 和 1 个值(所有这些都相互关联)并且每列中的元素具有相同的宽度，最好是保留相应列中最大长度的内容。
我好奇的是
- 这个 Controller 是否应该有绝对定位/绝对宽度(我怎样才能使宽度适合内容？)
- 我如何编写 CSS，使其能够在用户调整屏幕大小时很好地调整大小
- 如果标签列宽是所有标签内容的最大值的最小值，值列宽是所有值内容的最大值的最小值，如果我为 slider 设置最小宽度，那应该给我最小值容器的宽度，对吗？
- 如果行是动态创建的，我如何通过
grid-row属性引用它们？
感谢您的帮助。
var slidersContainer = document.createElement("div");
slidersContainer.id = "sliders-container";
var body = document.getElementsByTagName("body")[0];
body.appendChild(slidersContainer);
for (i = 0; i < 10; i++) {
var sliderContainer = document.createElement("div");
sliderContainer.className = "slider-container";
slidersContainer.appendChild(sliderContainer);
var label = document.createElement("div");
label.className = "slider-label"
label.innerHTML = "some-label-" + i;
sliderContainer.appendChild(label);
var input = document.createElement("input");
input.className = "slider";
input.min = 0;
input.max = 100;
input.type = "range";
sliderContainer.appendChild(input);
var value = document.createElement("div");
value.className = "slider-value";
value.innerHTML = "0.0000001";
sliderContainer.appendChild(value);
}#sliders-container {
position: absolute;
top: 0;
right: 0;
margin: 20px;
padding: 5px;
background-color: #333333;
display: grid;
grid-auto-rows: auto;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 10px;
}
.slider-container {}
.slider-label {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: small;
color: white;
grid-column: 1;
}
.slider {
grid-column: 2;
}
.slider-value {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: small;
color: white;
grid-column: 3;
}<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>最佳答案
将 CSS 网格 属性应用到 slider-container 而不是 absolutely positioned 容器 - 请参见下面的演示:
var slidersContainer = document.createElement("div");
slidersContainer.id = "sliders-container";
var body = document.getElementsByTagName("body")[0];
body.appendChild(slidersContainer);
for (i = 0; i < 10; i++) {
var sliderContainer = document.createElement("div");
sliderContainer.className = "slider-container";
slidersContainer.appendChild(sliderContainer);
var label = document.createElement("div");
label.className = "slider-label"
label.innerHTML = "some-label-" + i;
sliderContainer.appendChild(label);
var input = document.createElement("input");
input.className = "slider";
input.min = 0;
input.max = 100;
input.type = "range";
sliderContainer.appendChild(input);
var value = document.createElement("div");
value.className = "slider-value";
value.innerHTML = "0.0000001";
sliderContainer.appendChild(value);
}#sliders-container {
position: absolute;
top: 0;
right: 0;
margin: 20px;
padding: 5px;
background-color: #333333;
}
.slider-container { /* CHANGED */
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 10px;
}
.slider-label {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: small;
color: white;
grid-column: 1;
}
.slider {
grid-column: 2;
}
.slider-value {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: small;
color: white;
grid-column: 3;
}关于javascript - 将 CSS 网格布局与动态创建的行一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54857910/