0

我正在尝试使用旋转按钮在我的应用程序左侧实现导航工具栏。当我使用 css transform:rotate 旋转按钮时，边框容器仍然会执行其所有布局计算，就好像按钮没有旋转一样，因此它们最终会重叠并垂直位于错误的位置。在我深入了解 dijit/layout/utils 模块以解决这个问题之前，我想知道是否有人已经有了我只是没有看到的解决方案。

谢谢！

在这里摆弄 http://jsfiddle.net/eric_isakson/2bkKk/6/

JavaScript：

require(["dojo/_base/window", "dijit/Toolbar", "dijit/form/Button", "dijit/layout/BorderContainer"], function(win, Toolbar, Button, BorderContainer) {
  var bc = new BorderContainer();
  bc.placeAt(win.body(), "last");
  var tb = new Toolbar({region: "leading"});
  bc.addChild(tb);
  var b1 = new Button({label: "button1"});
  tb.addChild(b1);
  var b2 = new Button({label: "button2"});
  tb.addChild(b2);
  bc.startup();
  tb.startup();
  b1.startup();
  b2.startup();
});

CSS

html, body {
width: 100%;
height: 100%;
margin: 0;
overflow:hidden;
}

.dijitBorderContainer {
width: 100%;
height: 100%;
}

.dijitButton {
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
display: block;
}

这是所需的外观：

垂直按钮逆时针旋转 90 度

4

1 回答 1

0

如果我理解你的权利，你希望你的按钮水平？然后你只需要删除轮换的行。

.dijitButton {
display: block;
}

问候，米里亚姆

于 2013-10-02T08:22:07.290 回答