Question

我正在尝试使用CSS网格布局，以便为具有动态创建的行的“控制器”设置样式。我无法正确调整间距。

在我所拥有的内容中，滑块容器没有出现在它们自己的行中（尽管grid-auto-rows: auto），滑块容器中的内容也没有出现在同一行中（尽管grid-template-columns: 1fr 2fr 1fr）。在第2列和第3列之间也发生了一些奇怪的意外间距（无论如何都应该不存在）。

我最终想要的是每行包含1个标签，1个滑块和1个值（彼此相关），并且每列中的元素具有相同的宽度，最好是在相应的列中保留最大长度的内容。

我很好奇的事情

此控制器是否应具有绝对定位/绝对宽度（我将如何使其具有适合内容的宽度？）
如何编写CSS以便随着用户调整屏幕大小而调整大小
如果标签列宽度是所有标签内容的最大值的最小值，而值列宽度是所有值内容的最大值的最小值，如果我为滑块设置了最小宽度，那应该给我最小值容器的宽度，对吧？
如果动态创建了行，如何通过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>

Answer 1

将 CSS网格属性应用于slider-container而不是绝对定位容器-请参见下面的演示

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;
}

结合使用CSS网格布局和动态创建的行

1 个答案: