javascript - 通过 JavaScript 和 d3 以编程方式并排输入两个表单

Question

虽然我看过很多类似的问题，并尝试了很多变体，但我无法同时获得这两种输入形式。毫无疑问，我错过了适用于这种情况的组合。建议表示赞赏。

Fiddle

#CURSOR_TB {
  display: inline;
}

#OFFSET_SLIDER {
  display: inline;
}

<div id = "controls"> </div>

var setupCursorTextBox = function() {
  var S1;
  S1 = d3.select("#controls")
    .append("form")
    .append("label")
    .text("cursor ")
    .insert("input")
    .attr({
        type: "text",
        id: "CURSOR_TB",
        class: "cursor",
        value: ""
    })
} // End of setupCursorTextBox

var setupSliders = function() {
  var S1;
  S1 = d3.select("#controls")
    .append("form")
    .append("label")
    .text("offset ")
    .insert("input")
    .attr({
        type: "range",
        id: "OFFSET_SLIDER",
        class: "slider",
        min: 0.0,
        max: 100.0,
        value: 0.0,
    })
} // End of setupSliders

setupCursorTextBox();
setupSliders();

Answer 1

您可以只添加一行 CSS:

form { display: inline-block; }

或者为每个表单添加一个内联样式:

.append("form")
.style("display", "inline-block")
  .append("label")
  //... etc

或者为每个表单添加一个定义相同属性的类:

// in CSS: .inline-form { display: 'inline-block' }
.append("form")
.attr("class", "inline-form")
  .append("label")
  //... etc