CSS怎么把两行文字变成一行显示

html-css043

CSS怎么把两行文字变成一行显示,第1张

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>

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

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

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

1、input {display:blockfloat:left}

ul {margin:0pxpadding:0pxfloat:left}

这样就可以让input和ul显示在一行了。

但这样出现的问题是,紧跟着的内容也会跑到一行去,所以这里的ul后面再加一个div用来清除浮动。

2、input {display:blockfloat:left}

ul {margin:0pxpadding:0pxfloat:left}

div {clear:both}

3、当然,你也可以用两个td来并列实现,如:

<table><tr><td><input type="text" size="30" maxlength="100" value=""></td><td><ul class="errorMessage" style="color: red"><li><span>2134</span></li></ul></td></tr></table>