Question

我有一个提交按钮，其文本需要旋转。但是，我似乎只能解决如何旋转整个提交按钮而不仅仅是VALUE。

我用来旋转的CSS只是：

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

并且提交按钮的整个CSS是：

.form input[value="SUBMIT"] {
    height:1.5em;
    width:7em;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    font-size:1.5em;
}

你可以猜到，这适用于整个提交按钮，所以整个事情都是旋转的（因此为什么我交换了高度/宽度属性使它成为一个薄的垂直条，见下图）。

问题是这使得按钮位置非常奇怪，我无法将它移到div中的所需位置（直接位于textarea的右侧）。有足够的空间，但添加margin-top:-XYZem只会将按钮向上推一点，然后停止。

Here's a live version so you get the idea

当我没有完成旋转时，按钮很容易定位;是否可以仅旋转按钮上的文本值，而不是整个按钮本身？

Answer 1

在div中输入输入并自定义样式

HTML代码：

<div class="button">
    <input type="submit" value="submit" />
</div>

css样式：

.button{
/* write your style here*/
    background-color: #12E9F0;
    border: medium none;
    margin-right: 0;
    padding: 0.2em 0.6em;
}
.button input[type="submit"]{
    height:1.5em;
    width:7em;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    font-size:1.5em;
    border:0 none;
    background:none;
}

Answer 2

我认为这就是你需要的：

.form input[value="SUBMIT"] {
    -moz-transform: rotate(-90deg);
    font-size: 1.5em;
    height: 1.5em;
    position: absolute;
    top: 3.5em;
    width: 7em;
}

使用CSS将输入值旋转90度

2 个答案: