Two input forms side-by-side programatically via JavaScript

Two input forms side-by-side programatically via JavaScript & d3

本文关键字：via JavaScript programatically side-by-side input forms Two      更新时间：2023-09-26

尽管我已经研究了很多类似的问题，并尝试了许多变体，但我无法同时获得这两种输入形式。毫无疑问，我错过了在这种情况下有效的一个组合。建议不胜感激。

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();

您只需添加一行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
相关文章：