使用CSS旋转输入'；s值为90度

我有一个提交按钮，它的文本需要旋转。但是，我似乎只知道如何旋转整个submit按钮，而不仅仅是

值

我用来旋转的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;
}

正如您所猜测的，这适用于整个submit按钮，因此整个按钮都是旋转的（因此我交换了height/width属性，使其成为一个细竖条，请参见下图）

问题是，这使得按钮的位置非常奇怪，我无法将其放置到div中所需的位置（直接位于文本区域的右侧）。这里有足够的空间，但是添加

边距顶部：-XYZem

只需向上推一点按钮，然后停止

---

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

将输入放入div并自定义样式

。按钮{
/*在这里写下你的风格*/
背景色：#12E9F0；
边界：中等无；
右边距：0；
填充：0.2em 0.6em；
}
.按钮输入[type=“submit”]{
高度：1.5em；
宽度：7em；
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
字号：1.5em；
边界：0无；
背景：无；
}

---

我想这就是你需要的：

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

---

正确，稍微增加一点，即使用

.button

div定位按钮并将背景色/填充等全部放在输入本身上要容易得多。干杯，伙计！