日期:2014-05-17  浏览次数:20476 次

真奇怪!!
有如下一段代码,运行之后会发现第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&