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

html-css030

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

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

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

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

CSS把两行文字变成一行显示，首先我们需要理解块级元素和行级元素，行级元素就是没有width和height这个属性的，我们要将2行文字变成一行文字就只需要将这个元素变成行级元素就行了，使用display:inline,具体看代码：

<html>

<head>

<style>

.div1{

width:600px

height:200px

font-size:13px

}

.div1 p{

display:inline

}

</head>

<body>

<div class='div1'>

<p>我是测试文字</p>

<p>我是测试文字</p>

</div>

</body>

</html>

实现两个div在同一行显示有多种方法，可以用设置浮动——用float，还可以用绝对定位position，等等。

这里只简单介绍使用浮动实现方法。

方法一：

<div style="float:left"></div><div></div>

方法二：

<div style="float:left"></div><div style="float:left"></div>

方法三：

<div style="float:left"></div><div style="float:right"></div>

这三种方法均可实现div同行显示。