CSS如何使多行数据变成两列多行?

html-css015

CSS如何使多行数据变成两列多行?,第1张

首先你要有一个合理的布局:

<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 的。