Question

虽然我已经看了很多类似的问题，并尝试了很多变化，但我无法并排获得这两种输入形式。毫无疑问，我错过了在这种情况下可行的一个组合。建议表示赞赏。

#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

两个输入形式通过JavaScript以编程方式并排; D3

1 个答案: