CSS 问题 中 li{display:inline;}的作用

<html><head><style type="text/css">

ul{list-style-type:none;width:100%;padding:0;margin:0;float:left;}

a{text-decoration:none;float:left;

width:120px;font-size:15px;border-right:1px white solid;color:white;padding:3px 8px;}

a:hover{

}

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>

<p>在上面的例子中,我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素(元素前后没有换行)。这样就可以使列表排列成一行。ul 元素的宽度是 100%,列表中的每个超链接的宽度是 7em(当前字体尺寸的 7 倍)。我们添加了颜色和边框,以使其更漂亮。</p>

</body></html>


li{display:inline;}的作用是把li转换成内联元素显示。  li默认为块级元素,一个li会独自占据一行,display:inline会把块级元素转换成内联元素内联元素大小会根据内容多少而变换,且不会自动换行。  把内联元素转换成块级元素可以用display:block。

原文地址:https://www.cnblogs.com/weikeqi/p/9311720.html

时间: 2024-10-10 20:26:26

CSS 问题 中 li{display:inline;}的作用的相关文章

css display Display:inline,我们常常在li中使用它。功能是让li排成一排

在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示讲解方法来学习和了解DIV CSS display. 目录 CSS display使用 display的值有哪些 css display block显示 css display none隐藏 css display inline 一.CSS display使用     -   TOP 以下为DIV

理解与应用css中的display属性

display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面,我将按照顺序将上述几种属性做一个完整的讲解. 第一部分:display:none none这个值表示此元素将不被显示.比如,当我们在浏览网页时,如果看到了某个烦人的广告遮挡了我们的实现,更为可气的是,它还没有关闭的选项,这时(以chrome为例),我们就可以按下F12,打开开发者工具,点击element,然后使用左上角的选择工具选中想要删

display:inline 遇上 li 无效? why?

若制作导航栏时,使用列表li 的定义时,若想加上一个背景图 ,这时候若定义li的一个属性为:li{display:inline ; width:83px; height:30px;},则浏览器会无视后面的高和宽属性的定义,按照默认字体大小来显示!   解决的方法为,将display:inline ,改成 display:block: 和加上float:left; 即可正常,完整的应为:li{display:block; float:left;  margin-right:5px; width:8

display:inline

display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认display属性是block, 但将div的display设置为inline的话,则多个div可以像span一样显示在一行了. 它可以让行内显示为块的元素,变为行内显示,例如 <div> DIV1 </div> <div> DIV2 </div> 这里DIV1和DIV2分

web前端之Html和Css应用中的细节问题

1.居中的n种方法:①.margin: 0 20%; ——设置margin上下外边距的值设置为0,左右外边距设置成相同的百分比,既可将盒子居中. ②.margin: 0 auto;width: 1000px;——设置margin上下外边距的值设置为0,左右外边距都设置成auto,然后再设置盒子的宽度,既可将盒子居中. ③.#outer_div{ padding: 30px; text-align: center; } #inner_div{display: inline-block; /*行内块

display:inline, :first-child(Pseudo-classes)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GETTING STARTED WITH BRACKETS</title> <meta name="description

你不知道的css中block与inline的区别(转)

所有的HTML元素都属于block和inline之一. block元素的特点是:(1)总是在新行上开始:(2)高度,行高以及顶和底边距都可控制:(3)宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. 相反地,inline元素的特点是: (1)和其他元素都在一行上:(2)高,行高及顶和底边距不可改变:(3)宽度就是它的文字或图片的宽度,不可改变.&l

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素 显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

块级元素和行内元素以及display中block、inline和inline-block的区别

块元素又名块级元素(block element),和其对应的是内联元素(inline element),都是html规范中的概念.块元素和内联元素的基本差异是块元素一般都从新行开始,相邻的块级元素将会在不同行显示.而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了.比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列. block元素