Question

我使用JavaScript在AJAX回调中动态创建和填充HTML表。我需要在单个行单元格上垂直堆叠3个按钮。我试过这个标准：

var btn = document.createElement('input');
btn.type = "button";
btn.className = "btn";
btn.value = "Test1";

然后将这些按钮附加到相关单元格。实际上，这使按钮从左到右在同一行上创建。我需要的是将它们垂直创建。我可以使用按钮组选项，将其属性设置为垂直吗？我不确定按钮组是否可以用作儿童。

Answer 1

选项很少：

使用display: block
使用浮动和clear: both;
在按钮之间使用<br/>
使用<div>

＆＃13;

#e1 button {
  display: block;
}

#e2 button {
  float: left;
  clear: both;
}

#e2:after {
  content: '';
  display: block;
  clear: both;
}

#e1, #e2, #e3, #e4 {
  border: 1px solid #ddd;
  margin: 10px 0;
}

＆＃13;

<div id="e1">
<button>button</button><button>button</button><button>button</button>
</div>
<div id="e2">
<button>button</button><button>button</button><button>button</button>
</div>
<div id="e3">
<button>button</button><br/>
<button>button</button><br/>
<button>button</button>
</div>
<div id="e4">
  <div>
    <button>button</button>
  </div>
  <div>
    <button>button</button>
  </div>
  <div>
    <button>button</button>
  </div>
</div>

＆＃13;

Answer 2

我终于找到了一个解决方案，它根本不涉及按钮之间的CSS，就像我一直在寻找的那样。正如我上面所说，我正在HTTPRequest回调中构建表，以便用动态数量的子句来解析返回的XML。所以，我不能使用任何“静态”html或“静态”CSS。解决方案（至少是我最喜欢的解决方案），只需在按钮之后发布一些br，而无需任何CSS装饰。这是我的试用javascript示例：

var y = document.createElement("TR");
x.appendChild(y);

var z = document.createElement("TD");

var btn = document.createElement('input');
btn.type = "button";
btn.className = "btn";
btn.value = "Test1";

z.appendChild(btn);
var br = document.createElement("br");
z.appendChild(br);

var btn = document.createElement('input');
btn.type = "button";
btn.className = "btn";
btn.value = "Test2";

z.appendChild(btn);
var br = document.createElement("br");
z.appendChild(br);

var t = document.createTextNode("MyCell");
z.appendChild(t);   

y.appendChild(z);

所以，这可能不是最“正式”的解决方案，但是它足够灵活，可以适应我动态创建的表而根本不用担心CSS。

编辑：感谢@Justinas用br指出了正确的方向（确实与CSS没有关系）。

如何在单个行单元格中的HTML表格上垂直堆叠多个按钮

2 个答案: