CSS left 屬性 · W3School CSS 參考手冊

# CSS left 屬性 ## 實例把圖像的左邊緣設置在其包含元素左邊緣向右 100 像素的位置： ``` img { position:absolute; left:100px; } ``` ## 瀏覽器支持所有主流瀏覽器都支持 left 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 ## 定義和用法 left 屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。注釋：如果 "position" 屬性的值為 "static"，那么設置 "left" 屬性不會產生任何效果。 ### 說明對于 static 元素，為 auto；對于長度值，則為相應的絕對長度；對于百分比數值，為指定值；否則為 auto。對于相對定義元素，left 的計算值始終等于 right。 | 默認值： | auto | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS2 | | --- | --- | | JavaScript 語法： | _object_.style.left="100px" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | auto | 默認值。通過瀏覽器計算左邊緣的位置。 | | _%_ | 設置以包含元素的百分比計的左邊位置。可使用負值。 | | _length_ | 使用 px、cm 等單位設置元素的左邊位置。可使用負值。 | | inherit | 規定應該從父元素繼承 left 屬性的值。 | ## TIY 實例 [使用固定值設置圖像的左邊緣](/tiy/t.asp?f=csse_position_left) 本例演示如何使用固定值設置圖像的左邊緣。 ``` <html> <head> <style type="text/css"> img { position:absolute; left:100px } </style> </head> <body> <h1>這是標題</h1> <img class="normal" src="/i/eg_smile.gif" /> <p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p> </body> </html> ``` [使用百分比設置圖像的左邊緣](/tiy/t.asp?f=csse_position_left_percent) 本例演示如何使用百分比值設置圖像的左邊緣。 ``` <html> <head> <style type="text/css"> img { position:absolute; left:20% } </style> </head> <body> <h1>這是標題</h1> <img class="normal" src="/i/eg_smile.gif" /> <p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 定位](/css/css_positioning.asp "CSS 定位 (Positioning)") HTML DOM 參考手冊：[left 屬性](/jsref/prop_style_left.asp "HTML DOM left 屬性")