float浮动不清楚对块状元素的影响
来源:互联网 发布:淘宝店铺微信推广 编辑:程序博客网 时间:2024/05/15 11:41
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0; padding: 0} /* p{ margin: 0; float: left; }*/ ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; background-color: red; } a { float:left;/*不加float a就是一个内联元素,加了float 就可以设置宽度了*/ width:7em; /* display: block;*/ 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; /*float: left;*/ } </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><div>在上面的例子中在上面的例子中在上面的例子中在上面的例子中</div><p> 在上面的例子中,我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素(元素前后没有换行)。这样就可以使列表排列成一行。ul 元素的宽度是 100%,列表中的每个超链接的宽度是 7em(当前字体尺寸的 7 倍)。我们添加了颜色和边框,以使其更漂亮。</p></body></html>
<a>inline元素 ,对于float:left的作用就是变成inline-block 目的是可以设置宽度等,因为inline元素不能设置宽度
对于li可以不用float :left了 ,因为本身display :inline 内联元素就是一行中一个挨一个布局的(float:left和display:inline的作用一样的。取其一即可)
对于父元素ul, 如果没有设置float:left,相当于一个空的块元素在页面上,
必须加上float:left
才占满DIV
0 0
- float浮动不清楚对块状元素的影响
- float浮动的块状元素编写的先后顺序对页面布局的影响
- 关于float浮动的块级元素在编写html时先后顺序对布局的影响
- 【初级-个人理解】float是否脱离普通流?是否占据空间?以及浮动对内联和块元素的影响。
- float对内联元素和块元素的影响
- 为什么要用浮动&浮动元素如何显示&浮动元素对其他元素的影响&清浮动
- CSS的float属性对周围元素位置的影响
- css_取消float对后面元素造成的影响
- float标签实现块状元素的左右布局
- CSS:浮动元素(float)的认识
- 浮动元素float的详细内幕
- 块状元素、行内元素、行内块状元素同行换行显示以及float后的情况
- 浮动元素(float)
- 浮动元素(float)
- css:float浮动元素
- 清除元素浮动带来的影响
- 清除网页float浮动影响
- HTML5第六课时,float浮动影响的消除,clear
- Input subsystem and Hardkey drive II
- ubuntu14.04安装深度音乐+百度音乐插件
- 社会交往中的六大著名法则 zt
- jsp之session应用
- 黑马程序员——Java基础:面向对象一些概念的区分(一)
- float浮动不清楚对块状元素的影响
- jsp第二课
- COM编程概述
- [python+nltk] 自然语言处理简单介绍和NLTK坏境配置及入门知识(一)
- 使用vs 2008编译mysql 遇到的问题
- jsp编程第一课
- Gitflow工作流
- tomcat配置解决中文乱码 (
- COM编程之一 组件