javascript - 如何更改单选按钮位置并添加行分隔符

Question

我尝试更改以下布局但没有成功， 我需要的是下拉框将与第二个 (RB2) 单选按钮(在右侧)平行，而不是在下方。 http://jsbin.com/xijohaqaci/1/edit?js,output

此外，我需要在标题下方和单选按钮之前添加行分隔符(细线)，如何实现？

对于那些想知道它是什么的人来说，这是 SAPUI5

https://github.com/SAP/openui5/

在 renderer 中，您应该放置描述控件外观的 Html/Css(任何 native ...)。例如为了使控件垂直，我添加了

oRm.writeAttribute('style','display:flex;flex-direction:column;align-items:flex-start');

Answer 1

不确定这是否是您要查找的内容，但您可以包装 _radioButtonGroup和 _dropDownBox在<div> , 然后应用 margin-top将下拉菜单与第二个单选按钮对齐:

JS:

renderer: function(oRm, oControl) {
    oRm.write("<div");
    oRm.writeAttribute('style','display:flex;flex-direction:column;align-items:flex-start;');
    oRm.writeControlData(oControl);
    oRm.writeClasses();
    oRm.write(">");
    oRm.renderControl(oControl._title);
    oRm.write("<hr");
    oRm.writeAttribute('style','border:0;display:block;width:100%;background-color:black;height:1px;');
    oRm.write(">");
    oRm.write("<div>");
    oRm.renderControl(oControl._radioButtonGroup);
    oRm.renderControl(oControl._dropDownBox);
    oRm.write("</div>");
    oRm.write("</div>");
  }

CSS:

#__box0 {
  margin-top: 22px;
}

然后你可以添加一个<hr>使用适当的样式以获得水平线。

See it on JSBin here.