做一个功能是多个<li>横排显示，<li>里面是<span>
li里面有一行的有多行的，做好以后一看，缺了很多东西
不明就里，写了个html试一试是哪里的问题
原本的li的css是
li {
float : left;
height : 50px;
line-height : 50px;
margin : 0 5px;
}
我在写html测试时，height和line-height都没有加，结果没有问题
后来把原来的css复制下来又加了border，出来的结果是：
<html>
<head>
<title></title>
<style style="text/javascript">
li {
float : left;
border : 1px solid #000;
height : 50px;
line-height : 50px;
margin : 0 5px;
}
</style>
</script>
</head>
<body>
<ul>
<li>
<span>li1</span>
</li>
<li>
<span>li2 line1</span><br/>
<span>li2 line2</span>
</li>
<li>
<span>li3</span>
</li>
</ul>
</body>
</html>
才明白是这样子啊，把line-height去掉就好了，但是我需要垂直居中，没办法，只能大概设置padding来实现了
分享到：
相关推荐
<li>1.console.log("script- 111");</li> <li>2.console.log("asynce1-111");</li> <li>3.console.log("async2-111");---然后跳出整个async1函数来执行后面js栈的代码</li> <li>4.console.log("promise1-111");...
<li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> </div> 我们遍历ul 下所有的li 并添加点击事件，一般我们会在for循环里面添加点击事件，但是结果和我们所期盼不一样，那么是为什么呢？？？？ 接...
以下将详细介绍HTML列表中的一些主要元素：`<dl>`, `<dt>`, `<dd>`, `<ul>`, `<li>`, 和 `<ol>` 的区别及应用。 1. **无序列表（Unordered List）** 无序列表通常用于显示不需按特定顺序排列的项目。它使用`<ul>`...
`<li>`则代表列表项，每个菜单项都应包含在一个`<li>`中。对于二级菜单，主菜单项下的子菜单会再嵌套一个`<ul>`，如下所示： ```html <ul class="main-menu"> <li> 主菜单1 <ul class="sub-menu"> <li>子菜单1-...
关于<li>列表的分页及Table的分页 js实现 适用静态分页
我们可以将`<li>`元素的`float`属性设置为`left`，这样它们就会向左浮动，并且如果空间允许，它们会并排显示。例如： ```css li { float: left; width: 50%; /* 分配给每列的宽度 */ } ``` 然而，这种方法存在...
<li><a href="#"><img src="images/ad4.jpg" thumb="" alt="" text="详细描述4" /></a></li> <li><a href="#"><img src="images/ad3.jpg" thumb="" alt="" text="详细描述5" /></a></li> </ul> </div>
默认情况下，浏览器会为`<ul>`添加一个左对齐的项目符号（通常是圆点），而`<li>`则会换行显示。然而，这仅仅是最基本的表现形式，我们可以利用CSS来改变它们的外观。 1. **清除默认样式**：在开始自定义样式前，...
一个简单的列表通常由`<ul>`（无序列表）或`<ol>`（有序列表）元素以及嵌套的`<li>`（列表项）元素组成。例如： ```html <ul class="highlight-list"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul...
这样，每个`<li>`元素前面就会显示指定的图片作为列表标记。这种方法简单直观，但图标大小固定，无法进行复杂的样式调整。 2. **通过背景图片（`background`）** 另一种方法是利用CSS的`background`属性，将图标...
<li><a href="index.html" title="个人主页" id="menu_selected"><span>个人主页</span></a></li> <li><a href="jianjie.html" title="我的简介"><span>我的简介</span></a></li> <li><a href="tongxue....
首先，`<ul>`标签的基本用法是创建一个无序列表，每个`<li>`（列表项）子标签代表列表中的一项。为了构建树结构，我们需要为`<li>`添加子级列表。例如： ```html <ul> <li>父节点1 <ul> <li>子节点1-1</li> <li...
在HTML中，我们可以使用各种标签来定义页面的不同部分，如`<header>`定义页眉，`<nav>`创建导航菜单，`<section>`分隔内容区域，`<article>`定义独立内容，`<footer>`表示页脚，以及`<form>`用于创建表单元素，使...
<li ><a class="a">计算机与电子信息</a> <ol class="a"> <li>数据库</li> <li>电子信息</li> <li>计算机组成与原理</li> <li>计算机基础 <ul> <li>计算机文化基础</li> <li>公共基础</li> <li>软件技术...
<li>项目 1</li> <li>项目 2</li> <li>项目 3</li> </ol> <ul> <li>项目 1</li> <li>项目 2</li> <li>项目 3</li> </ul> ``` 浏览器支持 ------------ 所有主流浏览器都支持 HTML li 标签，包括 Google ...
之前写了一篇周和月日历，但感觉体验不是太好，所以有重新做了一遍，加上了动画。还可以自定义显示日历里的内容。... <li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li>
<li>项目1</li> <li>项目2</li> <li>项目3</li> <!-- 更多项目 --> </ul> ``` - `<ul>` 和 `</ul>` 标签用于定义整个无序列表。 - `<li>` 标签用于定义列表中的每一项。 **示例代码：** ```html <html> <head>...
代码片段： ... <li> ... <a >全部问题</a> ... </li> ... <li> ... <a >经济金融</a> ... </li> ... <li> ... <a >企业管理</a> ... </li> ... <li> ... </li>
css动画的一个应用，与此前的css走马灯同样的内容。... <li class=cell>序号</li> <li class=cell>姓名</li> <li class=cell>年龄</li> <li class=cell>性别</li> <li class=cell>专业</li> </ul>
<li class="blue_nav">券好赚</li> <li>京东购物</li> <li>淘宝购物券</li> <li>腾讯象棋</li> <li>绝地求生</li> <li>微信跳一跳</li> <li>答题红包</li> <li>闯关小游戏</li> </ul>