所以我是新手,我正在尝试修改Windows CE设备上的代码,以便在按钮中垂直显示文本。
我的代码是:
.philips_menu_button {
BACKGROUND-IMAGE : url(dynalite/images/buttons/philips/Philips_Button_Menu.png);
TEXT-ALIGN : center;
WIDTH : 128px;
HEIGHT : 32px;
COLOR : #07529c;
FONT-WEIGHT : 600;
dynalite-type : button-theme;
upImage : dynalite/images/buttons/philips/Philips_Button_Menu.png;
downImage : dynalite/images/buttons/philips/Philips_Button_Menu_pressed.png;
text-offsety : 0;
text-offsetx : 0;
}
和
<dynalite:button style="BACKGROUND-IMAGE: none; POSITION: absolute; WIDTH: 80px; HEIGHT: 70px; FONT-SIZE: 20px; OVERFLOW: hidden; TOP: 230px; LEFT: 700px; dont_layout: true; textid: Button_0001_txt; Button_0001_txt: " id=Button_0001 class="philips_menu_button swap_page" onclick="TouchPanel.GoToPage( './Edit Presets.html')" alpha="False" ATOMICSELECTION="true" text="Edit<br> Levels">
<IMG style="POSITION: absolute; VISIBILITY: inherit; TOP: 0px; LEFT: 0px" id=Button_0001_img src=".\dynalite\images\buttons\philips\philips_button_menu.png" width=80 height=70>
<IMG style="POSITION: absolute; VISIBILITY: hidden; TOP: 0px; LEFT: 0px" id=Button_0001_img_1 src=".\dynalite\images\buttons\philips\philips_button_menu_pressed.png" width=80 height=70>
<DIV style="Z-INDEX: 998; POSITION: absolute; OVERFLOW: visible; TOP: 50%; LEFT: 0px">
<DIV style="Z-INDEX: 999; POSITION: relative; WIDTH: 80px; TOP: -50%; LEFT: 0px" id=Button_0001_txt>Edit
<BR>Levels
</DIV>
</DIV>
基本上屏幕设计为横向,但我想将其旋转90度。我可以处理必须旋转按钮或文本。
提前致谢。
史蒂夫
答案 0 :(得分:3)
如果要旋转按钮,可以使用带有转换的css方法..
<input type="button" value="edit" style="transform:rotate(7deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */"/>
如果您希望文本直立显示而不是旋转,则选项是使用jquery ..
html部分:
<input type="button" value="edit" id="vert" style="width:1.5em;">
jquery part:
$(document).ready(function() {
$('#vert').val('e\nd\ni\nt');
});
请在此处查看.. http://codepen.io/lukeocom/pen/mHnvl