css文字分成几行,怎么让它们在同一行

html-css0130

css文字分成几行,怎么让它们在同一行,第1张

用float:left可以实现,但最好用display:inline。代码如下:

<html>

<head>

<style>

.line{display:inline}

</style>

</head>

<body>

<div class="line">文字-第1行</div>

<div class="line">文字-第2行</div>

<div class="line">文字-第3行</div>

<div class="line">文字-第4行</div>

</body>

</html>

想要使用CSS将div元素的内容分成多列来显示,可以使用columns属性。columns属性一个简写属性,可以设置列数和列宽,用于设置分栏模块。下面本篇文章就来给大家介绍一下columns属性,希望对大家有所帮助。

columns 属性是一个简写属性,一次可以采用多个值;用于设置列宽和列数。

语法:

属性值:

● auto: 这会将列宽和列计数值设置为其浏览器默认值。

示例:

效果图:

注意:如果未指定column-width和column-count中的任何值,则浏览器默认将其值设置为auto。

● column-width和columns-count :用于使用整数值指定列宽和列数。

效果图:

浏览器支持:

● Chrome 50.0, 4.0 -webkit-

● Edge 10.0

● Firefox 52.0, 9.0 -moz-

● Safari 9.0, 3.1 -webkit-

● Opera 37.0, 15.0 -webkit- 11.1

应该是没有一开始的初始化。

应该是没有一开始的初始化padding和margin都要为0,input的输入框也要outline为none。