真奇怪！该如何处理

真奇怪！！
有如下一段代码，运行之后会发现第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的知识，

查看更多 下一篇