css左浮动怎么写?


本文摘自PHP中文网,作者青灯夜游,侵删。

在css中可以通过float属性来定义元素在哪个方向浮动;想要左浮动则只需将元素的float属性的值设置为left(float:left)即可。下面就来给大家介绍一下float属性,希望对你们有所帮助。

css float属性

float 属性指定一个盒子(元素)是否应该浮动,在哪个方向浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

注意: 绝对定位的元素忽略float属性!

语法:

1

float: left|right|none|inherit;

属性值

left:元素向左浮动。

right:元素向右浮动。

none:默认值。元素不浮动,并会显示在其在文本中出现的位置。

inherit:规定应该从父元素继承 float 属性的值。

示例:设置元素左浮动,创建一个水平菜单

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

ul

{

float:left;

width:100%;

padding:0;

margin:0;

list-style-type:none;

}

a

{

float:left;

width:6em;

text-decoration:none;

color:white;

background-color:purple;

padding:0.2em 0.6em;

border-right:1px solid white;

}

a:hover {background-color:#ff3300;}

li {display:inline;}

</style>

</head>

<body>

<ul>

<li><a href="#">Link one</a></li>

<li><a href="#">Link two</a></li>

<li><a href="#">Link three</a></li>

<li><a href="#">Link four</a></li>

</ul>

</body>

</html>

效果图:

1.jpg

上面的示例中,我们让ul元素和元素左浮动。li元素将显示为内联元素(没有换行符的元素之前或之后),这迫使列表为一行。

ul元素的宽度的100%,每一个超链接列表的宽度6 em(当前字体大小的6倍)。我们还添加一些颜色和边界使其更高档。

以上就是css左浮动怎么写?的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

设置div的宽度可以通过css的什么属性

css怎么设置背景图片的透明度

了解一些 提高前端开发效率的 css 属性选择器

css3+javascript怎么做一个旋转的3d盒子?

css表示什么

css怎么实现响应式布局

css什么是圣杯布局?

css如何改变图片颜色

css中添加阴影的方法有哪些

css样式怎么隐藏起来

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...