`

认识display:inline;与float:left;

JavaScriptXHTMLCSSHTML 
阅读更多

一.    

首先我们要明确，display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

      

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>span</title>

</head>

<body>
	<span style="border-bottom:1px solid #000;">
    	span默认样式为:display:inline;<br />
        设置边框样式为border-bottom:1px solid #000;<br/>	
        每行显示出来都会有下划线
    </span>
</body>
</html>

 

  效果如下：

span默认样式为:display:inline;
设置边框样式为border-bottom:1px solid #000;
每行显示出来都会有下划线

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

<body>
	<span style="border-bottom:1px solid #000; display:block;">
    	span默认样式为:display:inline;,但现在修改为:display:block<br />
                设置边框样式为border-bottom:1px solid #000;<br/>	
                  整个块下方出现下划线
    </span>
</body>
</html>

 

   　当然这看起来不像是display:inline;与float:left;的区别所在，但是当理解了float:left;的特性那么我们就清楚到底是怎么回事了。float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。 　　那么我们很清楚了，内联(display:inline;)元素不能设置宽高，因为内联属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。

        当定义了样式display:block或者为float:left时可以设置宽高

      

      

二.    

在实际应用中：例

 

      这样做就不能把a设置为display:block; 如果设置了就会以块形式显示

    a 的默认是display:inline;  在不需要对a加背景的时候可以用以下方式实现列表居中

      

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内联样式应用</title>
<style type="text/css">
*{margin:0; padding:0;}
div{ text-align:center; background:#CCC; padding:9px 0; width:900px; margin:0 auto;}
li{ list-style:none; display:inline;}
a{ padding:0 10px; color:#900; text-decoration:none;}
a:hover{ color:#C30;}



</style>

</head>

<body>
<div>
	<ul>
    	<li><a href="javascript:;">公司介绍</a></li>
        <li><a href="javascript:;">公司产品</a></li>
        <li><a href="javascript:;">公司新闻</a></li>
        <li><a href="javascript:;">服务中心</a></li>
        <li><a href="javascript:;">留言板</a></li>
    </ul>
</div>
</body>
</html>

 

  

三.    

li 使用float 更加灵活

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内联样式应用</title>
<style type="text/css">
*{margin:0; padding:0;}

div{  background:#CCC; width:1000px; overflow:hidden; position:relative; margin:0 auto;}
ul{ position:relative; left:50%; float:left;}
li{ position: relative;list-style:none; float:left; right:50%;}
a{ padding:6px 10px; color:#900; text-decoration:none; display:block; }
a:hover{ color:#fff; background:#F93;}



</style>

</head>

<body>
<div>
	<ul>
    	<li><a href="javascript:;">公司介绍</a></li>
        <li><a href="javascript:;">公司产品</a></li>
        <li><a href="javascript:;">公司新闻</a></li>
        <li><a href="javascript:;">服务中心</a></li>
        <li><a href="javascript:;">留言板</a></li>                
    </ul>
</div> 
 </body>
</html>

  

分享到：
| HTML字符实体
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS display:inline和float:left两者区别探讨

    本文和大家重点讨论一下CSS display:inline和float:left两者的区别，CSS display是指显示状态，inline表示内联，特点是紧贴着前一个内联元素，通常默认的内联元素有span,a,em,strong等。而float表示的是浮动，float:...

    有关display:inline-block在FF出现空白的解决方案

    4. **使用浮动布局**：虽然`float:left`或`float:right`不是`display:inline-block`，但它可以实现类似的效果，并且不会受到空白的影响： ```css .box { float: left; } ``` 5. **使用Flexbox或Grid布局**：...

    display:inline-block的使用示例

    将`.list`元素的`float:left`属性替换为`display:inline-block`，这样每个`.list`元素会像文本字符一样在一行内尽可能地排列，直到没有足够的空间为止。为了防止元素间的空白间隙（由于元素间的空格或者换行符引起）...

    让IE6/IE7支持display:inline-block属性的两种方法

    在Web开发中，`display:inline-block`是一种非常实用的CSS属性，它允许元素拥有块级元素的特性（如自定义宽度、高度），同时保持内联元素的排列方式，即允许元素在同一行显示。然而，IE6和IE7这两个较老的浏览器对`...

    悬浮广告方法日常收集整理

    .fl{float:left;display: inline;} .fr{float: right;display: inline;} .clearfix{*zoom: 1;} .clearfix:after{ display: block; content: ; height: 0;line-height: 0;visibility: hidden; clear: both;} /*tab ...

    float元素浮动后高度不一致导致错位的解决办方法

    浮动子元素定义需要的font-size， 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width:160px; display:inline-...

    css之display属性之inline-block布局实现详解

    - **不同之处**：`display: inline-block`不会让元素脱离正常文本流，而`float`会。`float`会导致父元素高度塌陷，需要额外的清理方法来恢复。 - **相同之处**：两者都可以实现类似的效果，使元素并排显示。 - **...

    CSS中如何把Span标签设置为固定宽度.pdf

    在CSS中，Span标签通常被用来对文本进行部分样式化，由于其默认的display属性为inline，这意味着它不会占据横向空间，而是与其他inline元素并排显示。然而，当需要为Span标签设定固定宽度时，就会遇到一些挑战，因为...

    IE6下出现双倍margin的解决方法

    - 元素设置了`margin`属性，例如`margin-left:15px;`。 **具体表现：** 假设一个类名为`ILeft`的元素定义为： ```css .ILeft { float: left; width: 150px; margin-left: 15px; } ``` 在IE6下，该元素左侧的...

    div-css-漂亮的导航条

    float:left; width:100%; background:#F4F7FB; font-size:93%; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #...

    解决浏览器兼容问题的CSS语法技巧大全.doc

    解决方案是在这个 div 里面加上 `display:inline;`。例如：`#imfloat{ float:left; margin:5px;/*IE 下理解为 10px*/ display:inline;/*IE 下再理解为 5px*/}` 3.浮动 IE 产生的双倍距离 IE 浏览器中，浮动元素会...

    ff浏览器下兼容height：auto的问题

    margin-left:5px; float:left; display:inline"&gt; &lt;div style="width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left; display:inline"&gt; &lt;div style="width:50px; height:40px; border:#...

    div CSS技巧

    div使用css的总结，很不错的吆 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px;...float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

    关于label和span设置width无效问题解决方法

    在默认情况下label、span 设置width 是无效的。一般要display属性 复制代码代码如下: display:... float:left; 但是一定要在后面的div里面加上 复制代码代码如下: clear:both; 不然会影响到后面的div板式会乱。

    最全前端面试题-2.2（浏览器兼容问题篇-上百篇题集整理1个月）.doc

    - **行内元素`display:block`后的`float`布局间隙**：在IE6中，设置`display:block`并使用`float`的行内元素间会有间距，可使用`float:left`和`display:inline`配合消除。 - **最小高度`min-height`不兼容**：IE6-...

    项目笔记项目笔项目笔记记

    - 使用 `display:flex` 或 `display:grid` 替代 `float` 和 `display:inline-block`。 ### 3. CSS 布局示例 以下是一个具体的 CSS 布局示例，用于实现导航栏的设计： ```css #nav { width: 867px; height: 51...

    2016年度最全整理浏览器兼容性问题与解决方案

    解决策略是同时添加`display:inline`和`display:table`，如`.inlineBlock {display: block; display: inline; display: table; margin: 10px;}`。 问题五：图片默认存在间距，即使使用了通用样式`*`也可能无法消除...

    Java相关课程系列笔记之十JSP学习笔记

    margin-left:200px; margin-top:40px; width:548px; height:177px; overflow:hidden; position:relative; } #adv,#num{ pos ition:absolute; } ul li{ list-style:none; display:inline; } ul img{ width:548px; ...

Magicbox
Global site tag (gtag.js) - Google Analytics