网页设计中，怎么用CSS让不同行的字显示在一行，例如图所示，上面怎么变成下面这种？

html-css023

网页设计中，怎么用CSS让不同行的字显示在一行，例如图所示，上面怎么变成下面这种？,第1张

可以通过浮动来设置，让不同行的两行一个左浮动，一个右浮动，这样，它们就显示在一行了。

还有一种方法是所有元素都左浮动，然后指定宽度，让宽度正好是两列的值，那么到两行的时候，它会自动折行。

通过决定定位，分别对没一行文字进行绝对定位，因为是绝对定位，所以可以指定它们到任意位置。position:absolute可以解决这个问题。

CSS3可以直接选择奇偶数，，

<style>

#list li:nth-of-type(odd){ background:#00ccff}奇数行 

#list li:nth-of-type(even){ background:#ffcc00}偶数行 

</style>

<ul id="list">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

如果不想用CSS3，怕有些低版本不支持的话，你只能用JS或者JQ来做，

同理，JQ取行数的奇偶，给加上不同的样式就可以了。