display:block 會導致換行，原來未仔細讀過其詳細文檔，今天碰到類似問題很是費了一番功夫。
將有問題的頁面代碼拷貝如下：
<html>
<table width=80>
<tr>
<td nowrap>
<font style="display:block">abcdefghigklmnopqrstuvwxyz 1234567890</font>
<font style="display:block">abcdefghigklmnopqrstuvwxyz 1234567890</font>
</td>
</tr>
</table>
</html>
我並不希望兩個font中的字型成為兩行。修改時一直考慮修改TD的CSS屬性，一直未見什麼效果。後來發現是font的style="display:block"。修改後就好了。
修改後：
<html>
<table width=80>
<tr>
<td nowrap>
<font style="display:inline">abcdefghigklmnopqrstuvwxyz 1234567890</font>
<font style="display:inline">abcdefghigklmnopqrstuvwxyz 1234567890</font>
</td>
</tr>
</table>
</html>
--------------------------
總結：通常很多人會通過調用javascript,修改元素的CSS屬性：display:block和display:none，來設定其顯示和隱藏。一定不要忽視了display:block會導致換行這一問題。
--------------------------
附錄：
1，display 所有參數：
display 屬性設定是否及如何顯示元素。
繼承性：No
說明這個屬性用於定義建立布局時元素產生的顯示框類型。對於 HTML 等文件類型，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示階層。對於 XML，由於 XML 沒有內建的這種階層，所有 display 是絕對必要的。
注釋：CSS2 中有值 compact 和 marker，不過由於缺乏廣泛的支援，已經從 CSS2.1 中去除了。
JavaScript 文法CSS 屬性也可通過一段 JavaScript 被動態地改變。
指令碼文法：object.style.display="none"
在我們的 HTML DOM 教程中，您可以找到更多有關 display 屬性 的細節。
在我們的 HTML DOM 教程中，您也可以找到完整的 Style 對象參考手冊。
例子p { display: block }li { display: list-item }table { display: table }td, th { display: table-cell }可能的值
| 值 | 描述 |
|---|---|
| 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>） |
原文：http://www.w3school.com.cn/css/pr_class_display.asp
2 ,display:block 導致的換行
#divHeader #divNav #divLogo{margin-right:5px; width:205px; height:72px; float:left;position:relative;}
#divHeader #divNav #divLogo a:link, a:visited,a:hover,a:active{
width:200px;
height:67px;
text-decoration:none;
display:inline;
float:left;
position:relative;
border:#f00 0px solid;
}
大多數人很容易將CSS屬性display和visibility混淆，它們看似沒有什麼不同，其實它們的差別卻是很大的。
visibility屬性用來確定元素是顯示還是隱藏，這用visibility="visible|hidden"來表示，visible表示顯示， hidden表示隱藏。當visibility被設定為"hidden"的時候，元素雖然被隱藏了，但它仍然佔據它原來所在的位置。
表格
明白表格相關的表現屬性值最好的方法想象html表格。table是最初的表現，你可以使用table-row類比table-cell類比td。
display屬性更進一步，可以通過使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。現在可以直接使用 columns構建表格，比在html中使用行構建快速。
最後，inline-table設定表格前後不換行。
使用CSS表格會嚴重損害可用性。HTML應該用來傳遞語意，所以如果你有表格式資料，那可以使用HTML表格。使用CSS表格僅僅會產生糟糕的資料如果沒有CSS資料將不可讀。
display:none和visibility:hidden;的不同在於display:none完全取消元素的顯示，visibility: hidden保持元素位置但視覺上的內容不可見。例如，如果3的第二段設定為display:none，第一段將僅跟在第三段，如果設定為 visibility:hidden，段落間就會空出。
inline與bolck的區別在於
display: inline; 在同一行
display:block; 前後換行
在DW中文版中翻譯為“定位”，常用的屬性有relative（相對）與 absolute（絕對）。
有很多朋友對這條指令的 用法還是不清楚，這裡做一定細緻的講解：position：relative； 表示相對定位，被定位了這個屬性的標籤在所屬的範圍內可以進行上下左右的移，這裡的移動與padding或是margin所產生的位置變化是不一樣的。 padding與margin是元素本身的一種邊距與填充距離並不是真正的移動，而被定義為relative的元素是真正的移動，這所產生的移動距離是從 margin的外圍到父級標籤內側之間這一段。
position：absolute； 表示絕對位置，如果定義了這個屬性的元素，其位置將依據瀏覽器左上方的0點開始計算，並且是浮動正常元素之上的。那麼當你需要某個元素定位在瀏覽器內容區的某個地方就可以用到這個屬性。
那麼有個問題產生了，現在大家做的網頁大部分是置中的，那麼我需要這個元素跟著網頁中的某個元素位置不論解析度是多少他的位置始終是針對頁內的某個元素的，那麼單純的absolute是不行的。
正確的解決方案就是在元素的父級元素定義為position：relative；（更正：這裡可以是祖父級，也可以是position： absolute；，多謝謝old9的提出）需要絕對位置的元素設為position：absolute；這樣再設定top，right，bottom， left的值就可以了，這樣其定位的參照標準就是父級的左上方padding的左上側。
原文：http://crazier9527.javaeye.com/blog/361184
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
