<div class="box">
<ul class="list">
<li>1111111111111</li>
<li>2222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
</ul>
</div>
用一个盒子包住一个无序列表,把盒子模型的宽度固定,当li没有宽度的时候,它就是单列的,当li有宽度而且浮动的时候,可以随意变成多列多行。
现在假设盒子模型宽是450~左右内边距是10:
样式一(一列多行):
*{padding:0margin:0}//初始化内外补白
li{list-style:none}//初始化列表
.box{width:450pxpadding:10px}
.box .list li{line-height:24px}
样式二(二列多行):
*{padding:0margin:0}//初始化内外补白
li{list-style:none}//初始化列表
.box{width:450pxpadding:10px 0 10px 10px}//这时候列表的宽度只剩下450-10=440,可以把宽度定为210加10右边外补白
.box .list{zoom:1}
.box .list:after{content:""height:0clear:bothdisplay:block}//清除浮动
.box .list li{widht:210pxline-height:24pxfloat:leftmargin-left:10px_display:inline}//两个220刚好440的宽
我写下 你应该看得懂控制文字大小
#plink a{
font-size: **px
}
控制 上下距离(默认你是竖行 排列的)
#plink li{
display:black;
padding:*px *px *px *px; 这4个 分别是 上 、右、下、左
或者 padding:*px *px; 这2个 分别是 上下 和 左右
}
* 是你设置的大小 比如 10px padding设置的是内补丁
或简单的 写成 padding-top:*px; 上面得内补丁为*。 或padding-button:*px;
对齐呢 有好几种 还有继承的因素
文本类对齐
水平对齐:
text-align : left | right | center | justify
left : 默认值。左对齐
right : 右对齐
center : 居中对齐
justify : 两端对齐
垂直对齐:
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
auto : CSS1 根据 layout-flow 属性的值对齐对象内容
baseline : CSS1 默认值。将支持 valign 特性的对象的内容与基线对齐
sub : CSS1 垂直对齐文本的下标
super : CSS1 垂直对齐文本的上标
top : CSS1 将支持 valign 特性的对象的内容对象顶端对齐
text-top : CSS1 将支持 valign 特性的对象的文本与对象顶端对齐
middle : CSS1 将支持 valign 特性的对象的内容与对象中部对齐
bottom : CSS1 将支持 valign 特性的对象的内容与对象底端对齐
text-bottom : CSS1 将支持 valign 特性的对象的文本与对象顶端对齐
length : CSS2 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。
定义由基线算起的偏移量。基线对于数值来说为0,
对于百分数来说就是0%。请参阅 长度单位 。目前IE尚未实现此参数
还有一些属性
1、 链接有无下划线
text-decoration : none || underline || blink || overline || line-through
none : 默认值。无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
2、刚说的 display
其他 列举你参考css 手册 看下 字体的种类、颜色、粗体、大小;还有内外补丁的值 等等了
主要根据你的效果来设置了
要补充一点 主意浮动 如果你用了的话 很多问题其实都是浮动影响的
示例:
在样式表顶部插入新的规则
实现效果:
插入后的style样式是这样的
注意: 此时的样式表并不能在控制台里面调试,在控制台中显示是灰色的。关于这点说明可以看这里: CSSRuleList 。大概的意思就是:CSS 规则列表 CSSRuleList 是一个(只允许间接更改的)类数组对象,包含着一个 CSSRule 对象的有序集合。因为只能间接更改(可更改,但是其本身只拥有读取方法),无法直接往规则列表中添加或移除规则,只能通过它的父样式表进行更改。事实上,.insertRule() 和 .deleteRule() 甚至都不是 CSSRuleList 的方法,而是 CSSStyleSheet 的。