法则七：按钮，列表框和组群框大小的确定方法

　1、如何确定按钮大小

　　方法一：在样式表单中指定按钮的固定宽度，所有需要相同尺寸的按钮都属于这一类别。其中需要注意的是尺寸单位应该是em，而不能是pixel。

　　代码样例如下：

＜style＞ .mainButton {width: 10em;} ＜/style＞

　　方法二：不指定按钮宽度，利用HTML的排版功能设置每个按钮的大小。这会造成所有按钮都同样大小，你可以再用HAL提供的简单代码调整同一类按钮的宽度。

　　代码样例如下：

＜script langauge=jscript src=../../HALsize.js＞＜/script＞ ＜style＞ button {font: 9pt tahoma; padding-top: 0px; padding-bottom: 0px; padding-right: 6px; padding-left: 6px} .ButtonA{;} .ButtonOKCancel {;} ＜/style＞ ＜body onload='HALsizeButtons(document, "ButtonA", false); HALsizeButtons(document, "ButtonOKCancel", true);'＞ ＜button id=butOne class=ButtonA＞One Button＜/button＞＜br＞ ＜button id=butTwo class=ButtonA＞Other Same Size Button＜/button＞ ＜/body＞

　2、如何确定列表框大小

首先，给短条目留出200%扩展空间，长条目留出100%扩展空间。然后把所有相关的列表框放在同样尺寸的表格单元中，以表格单元为基准，设置每个列表框为百分比形式（一般为100%）。

　　代码样例如下：

＜tr＞ ＜td width = 30%＞ ＜select style = "width:100%"＞ ＜option＞Bulgaria ＜option＞Greece ＜/select＞ ＜/td＞ ＜/tr＞ ＜tr＞ ＜td＞ ＜!—同列不同行 --＞ ＜select style = "width:100%"＞ ＜option＞Bulgarian ＜option＞Greek ＜/select＞ ＜/td＞ ＜/tr＞

　3、如何确定组群框的大小

　　对于组群框，最好是给文本留出扩展空间，并使其实际大小随表格变化而变化。包含组群框的表格单元要设为"nowrap"。组群框中的所有控件要同组群框放置在一个表中。

　　代码样例如下：

＜td width = 30% nowrap＞ ＜fieldset style = "width:100%; height: 100%"＞ ＜legend＞Group Box Label＜/legend＞ … 组群框中的所有控件应该在一个＜table＞中 … ＜/fieldset＞ ＜/td＞

　　　注：不一定设置高度为100%，除非你只需要组群框与其它控件左右对齐。