真奇怪!!
有如下一段代码,运行之后会发现第2列的按钮自动换行了。找了好久都没找到原因?最后去掉了style="display: block;",按钮就不换行了。真奇怪。有谁知道肿么回事吗?谢谢
<table cellspacing="0" cellpadding="0" width="100%" class="blueborderbox bigblue">
<tr>
<td class="titlestyle" align="left" colspan="2">
员工工时查询
</td>
</tr>
<tr>
<td>
<input type="button" name="ctl00$ContentPlaceHolder1$btnLoad" value="差异" onclick="return DoSynchronism();"
id="ctl00_ContentPlaceHolder1_btnLoad" class="button" />
</td>
<td align="left">
<input type="button" name="ctl00$ContentPlaceHolder1$btnStratified" value="分层比较"
id="ctl00_ContentPlaceHolder1_btnStratified" class="button" style="display: block;" /><input
type="button" name="ctl00$ContentPlaceHolder1$ctl01" value="xx" class="button" />
</td>
</tr>
</table>
[解决办法]
display: block;设置块元素了,所以后面的元素如果不设float等样式,肯定要换行的
好比div是块元素,两个div放一起是不是每个div占一行?
[解决办法]
这没什么好奇怪的。
display 可能的值即解析如下:
none:此元素不会被显示。
block:此元素将显示为块级元素,此元素前后会带有换行符。
inline:默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block:行内块元素。(CSS2.1 新增的值)
list-item:此元素会作为列表显示。
run-in:此元素会根据上下文作为块级元素或内联元素显示。
compact:CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker:CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table:此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table:此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group:此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group:此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group:此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row:此元素会作为一个表格行显示(类似 <tr>)。
table-column-group:此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column :此元素会作为一个单元格列显示(类似 <col>)
table-cell:此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption:此元素会作为一个表格标题显示(类似 <caption>)
inherit:规定应该从父元素继承 display 属性的值。
[解决办法]
html文档中的标签分:块级元素和内联元素(行内元素)
块级元素 一个块级元素无论宽度多少,都要占一行
行内元素 一行中一个挨一个,满了再换行
一个块级元素可以转成行内元素(display: inline;)
一个行内元素可以转成块级元素(display: block;)
当然还有各种float;和定位
这是html+css的知识,