CSS 排版(同一行左右對齊)

在處理本質上相對的事物時,也常會用到與前面類似的表格排版設計。這次你不是讓它們在中央交會,而是讓兩個元件擺在瀏覽器視窗的兩側。這也許是一個你想讓商標放在頁面右上角,而讓導覽元件放在頁面左上角的案例:
From:http://ccca.nctu.edu.tw/~hlb/trans/practicalcss/

在這裡我們使用跟表單範例裡一樣的 DIV.ROW,但這次會使用不同的 SPAN。左邊的 SPAN 往左浮動,而且文字往左靠。右邊的 SPAN 往右浮動,而且文字往右靠。
CSS:

div.row span.left {  float: left;  text-align: left;  font-weight: bold;  color: #fff;  width: 49%;  }
div.row span.right {  float: right;  text-align: right;  font-weight: bold;  color: #fff;  width: 49%;  }

HTML:

<div style= "width: 90%; background-color: #666;border: 1px solid #333; padding: 0px; margin: 0px auto;"><div class="spacer"></div>
<div class="row"><span class="left">首頁 > 產品</span><span class="right">[商標]</span></div>
<div class="spacer"></div>
</div>
Please follow and like us:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *