按钮中的垂直文本

因此，我对此感到陌生，并试图修改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>&#10;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度旋转。我可以处理不必旋转按钮或文本。

在此先感谢。

史蒂夫

来源

2013-02-07 user2049778

如果你想旋转就可以使用与变换的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的一部分：

$(document).ready(function() { 
     $('#vert').val('e\nd\ni\nt'); 
     });

看看这里.. http://codepen.io/lukeocom/pen/mHnvl

来源

2013-02-07 07:53:25 lukeocom

按钮中的垂直文本

回答

相关问题