1. 程式人生 > >表格和列表樣式

表格和列表樣式

section 不換行 文本框 垂直 clas enter 解釋 pre pos

text-align:center;

border-collapse:collapse;// 邊框線合並,變成一條細線

border-collapse:separate;//默認有填充

//這是邊框線的寬度,間距, 解釋:border-collapse: separate;的狀態下才有效。因為要設置間距,不能合並。

table { border-spacing:10px;

}

3.caption-side 標題位置

    table {
       caption-side: bottom;

}

解釋:設置表格標題。

表格文字過多換行,默認是不換行

table-layout:fixed; //內容長不拉伸單元格,

table-layout:auto;//默認,自動拉伸

dorder:1px solid red; //外邊框

table tr th,table tr td{ border:1px solid red;}//表格邊框

ul{

list-style-type:square;}

ul { width: 120px;

list-style-position: inside; } //結果就是 標記位於內容框內部

vertical-align:bottom;//底部 //這四個只對表格有效

vertical-align;baseline;//基線

vertical-align:middle;//中部

vertical-align:top;//頂端

b{
vertical-align: super; sub

}

text-align:center //水平居中

vertical-align在div中怎麽垂直居中 (vertical-align 垂直對齊)

div{

width height background

text-align:center//文字先水平居中 ,在css中不能垂直居中可以種vertical-align設置

}

然後 在div 的文字要套一個span才行

div span{ vertical-align:-50px}//一定用負數,而且其他middle ,bottom是沒有用的

表單

textarea em{ vertical-align:50px // 默認文字是在文本框的底邊, 正值向上移動,負值向下.

}

表格和列表樣式