Question

我有5个按钮，我正在旋转。将它们对齐以使它们不重叠的最佳方法是什么，因此我可以在需要时轻松调整高度/宽度？按钮需要垂直运行。起点是未旋转的第一个按钮开始的左上角。

目前看起来像这样：

http://jsfiddle.net/JasonJSFiddle/3ypja9om/

这就是我正在做的旋转

button.rotate {
    width:100px;
    height:40px;

    -webkit-transform: translateY(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateY(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateY(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateY(-100%) rotate(-90deg); /* Opera */
    transform: translateY(-100%) rotate(-90deg); /* W3C */
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
}

Answer 1

将它们全部放在一个div中，浮动它们left或right取决于你想要实现的目标

＆＃13;

*{box-sizing:boder-box;padding:0; margin:0;}
body{position:relative;width:100vw;height:100vh}
.rotate {
    position: absolute;
    top: 0;
    left: 38px;
    height: 40px;
    background: red;
    transform: rotate(90deg);
    transform-origin: left top;
    padding:10px;
}
.rotate button{
    display:inline;
    float: left;
}
div:not([class=rotate]){
    padding-left: 40px;
}

＆＃13;

<div><button>button 1</button></div>
<div><button>button 2</button></div>
<div><button>button 3</button></div>
<div><button>button 4</button></div>
<div><button>button 5</button></div>

<div class="rotate">
    <button>button 1</button>
    <button>button 2</button>
    <button>button 3</button>
    <button>button 4</button>
    <button>button 5</button>
</div>

＆＃13;

轻松对齐旋转按钮

1 个答案: