HTML篇之CSS样式——div ul li 嵌套后解决高度自适应方法

最新推荐文章于 2022-09-20 10:42:32 发布
最新推荐文章于 2022-09-20 10:42:32 发布
阅读量1.9w 收藏 3
点赞数
分类专栏： HTML

方法一：



div 自适应宽度
很简单 ，你应该设置div的display:inline-block
然后不要设置宽度就行了


方法二： 

<body bgcolor="#0B3D82">

 
div ul li 嵌套后解决高度自适应办法:
html代码如下
<div class="main_div">
<ul>
<li><a href="#"><img src="images/img.gif" width="80" height="90" /><span class="front12_arial">daugli-1webServer-1web Server</span></a></li>
<div style="clear:both;"></div>
<ul>
<div class="main_div">
 
CSS代码如下：
.main_div {
 width:80%;
 margin-top: 15px;
 margin-right: 26px;
 margin-bottom: 15px;
 margin-left: 26px;
}
.main_div ul {
 min-height:205px;
 height:auto;
}
.main_div li {
float:left;
text-align:center;
height:170px;
width:130px;
border:1px solid #CCC;
margin-right:10px;
margin-bottom:15px;
padding:10px;
}
 
目的：增加多个li后，DIV高度自动适应。
思路：定义li高度为绝对值 205px，定义ul高度为自动 {min-height:205px;  height:auto;} main_div 高度为 空
注意：
1. min-height:205px;  height:auto; 意思为最小高度为205，超过以后自适应
2. 增加<div style="clear:both;"></div> 清除换行
3. 本例在IE6下和Chrome下测试正常
别样的风采是我
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html中＜div＞＜/div＞标签和＜li＞＜/li＞标签的简单应用
ZLQiang_csdn的博客
06-04 4029
实现简单的鼠标的导航渐变和简单电器分类页面 我们知道<div></div>标签： <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table&g
div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
09-25
在网页布局设计中，`div ul li` 的嵌套结构是一种常见的实现列表展示的方法，尤其在构建导航栏、产品展示等场景中。然而，当我们在这样的结构中动态添加多个 `li` 元素时，如何让包含它们的 `div` 自动调整高度以...
div ul li 嵌套后解决高度自适应方法
iteye_8029的博客
10-19 1490
方法一： div 自适应宽度 很简单 ，你应该设置div的display:inline-block 然后不要设置宽度就行了 方法二： &lt;body bgcolor="#0B3D82"&gt; div ul li 嵌套后解决高度自适应办法: html代码如下 &lt;div class="main_div"&gt; &lt;ul&gt; &lt;li&gt;&lt
li内高度自适应
qq_45942606的博客
10-28 332
在li中加入overflow:auto; zoom:1;
html ul高度自适应,如何让div中的ul元素自适应
weixin_30033489的博客
06-16 777
可以使用这个方法，安装屏幕自适应写代码：1280分辨率以上(大于1200px)@media screen and (min-width:1200px){#page{width:1100px;}#content,.div1{width:730px;}#secondary{width:310px}}1100分辨率(大于960px，小于1199px)@media screen and (min-...
行内块元素高度撑满父元素
weixin_46019220的博客
08-13 1485
最近遇到了一个css问题；问题如下 父元素不设置高度，子元素全为（display:inline-block），左侧内容撑开高,想要右侧子元素高度为100%（即与左侧子元素高一致），使用height:100%,并不好使，始终是内容撑开的高，而非父级高， <li v-for="list in lists”> //父元素 <div>{{list.name}}</div> //左侧子元素 <div><p v-for="item in list.ch..
鲜花网站HTML+CSS
最新发布
06-05
2. **主体（）**：包含网页的主要内容，如导航栏（`<nav>`）、轮播图（`<div class="carousel">`）、鲜花分类（`<section>`）、产品列表（`<ul>`）、购买表单（`<form>`）等。 3. **元素（<元素>）**：HTML中的每个...
DIV+CSS布局教程大全与pdf电子书 下载
10-30
- 使用`<ul>`和`<li>`标签构建列表，并使用CSS设置垂直排列。 - **横向菜单：** - 通过CSS的`display: inline-block`或Flexbox布局实现水平布局。 #### 十二、校验及常见错误 - **XHTML校验：** - 使用W3C提供的...
div+css布局中常用方法汇总.docx
11-26
【div+css布局中常用方法】在网页设计中，Div+CSS布局是现代网页开发的基础，它通过HTML的div元素和CSS样式来控制页面布局，提供了更灵活、可维护性更强的设计方式。以下是一些在div+css布局中常用的技术和方法： 1...
html-css-task：html && css任务
02-22
`<h1>`到`<h6>`用于标题，`<p>`用于段落，`<a>`定义超链接，`<img>`插入图片，`<ul>`和`<li>`创建无序列表，`<ol>`和`<li>`则用于有序列表。此外，`<div>`是通用容器元素，常用于布局和应用样式。 接下来，CSS...
如何处理 在html中 li 的高度自适应（且li里面的内容有浮动的情况下）
ankuailan3925的博客
01-06 773
废话不多说，我们写贴出代码 这个是 Html 代码 <div class="main"> <ul> <li> <div class="main-left">23</div> ...
css宽高自适应
热门推荐
YY的博客
09-20 1万+
css宽高自适应
html自动获取高度,html页面高度随内容自动增高解决方法
weixin_34539644的博客
05-30 1036
html页面高度随内容自动增高请教大家，怎么让网页的高度随着内容的增加而自动增高，如csdn这里的论坛发帖一样，我回复一条，页面就增高一部分，请问大家这是怎么实现的，求指教，谢谢！------解决方案--------------------本身父级就是有子集元素高度撑开的，可以看如下代码htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""ht...
父级div高度由子级div撑开; 里层div的高度始终与外层div的高度一样
weixin_42011096的博客
08-25 9524
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;Page Title&lt;/
li浮动时ul高度为0，解决ul自适应高度的几种方法
飞翔的熊blabla
11-25 1923
在网页设计中，常常需要对li标签做浮动效果，但是在不同浏览器中会遇到兼容性问题，比如IE中会出现ul高度为0的情况，是效果不能达 到预期效果。那么这里我就来讲解一下解决这个问题的几种方法。 1.给ul元素设置高度height 最直接的办法是给ul元素设置一个高度，即ul标签添加height属性，代码如下: ul {     list-style-type: none;   
解决ul高度自适应问题
ROVAST的专栏
03-30 2027
在使用ul   li布局的时候，会出现ul的高度不能随li的变化而动态拓展高度
css总结
qq_38105960的博客
07-28 145
一. 选择器 基本选择器 (1) 标签选择器 <p></p> p (2) 类选择器 <p class="cls"></p> .cls (3) id选择器 <p id="pid"></p> #pid (4) 通配符 * 复合选择器 (1) 伪类选择器 :link 未访问 :visited 已访问 :hover 鼠标经过 :ac...
ul中的li设置等宽高css
chalkbox的博客
03-31 97
响应式布局中宽度与高度相同 纯css方法设置ul中li宽高相等 关键词：VW / VH vw：视窗的宽度 vh：视窗的高度 思路：根据vw获取视图宽度从而设置li的宽度等于高度 代码： <li> <div class="test"> <img src="../images/hm1.png" alt=""> <div&gt...
div嵌套ul时div的宽度和高度自适应
hxy199421的博客
11-08 6637
div中嵌套ul时div的宽度和高度随着ul里元素的变化而变化，下面是一个事例，可以改变li元素的内容和个数去验证： div高度自适应 .adaption{ border:solid 1px #00FF00; overflow:auto;  /**高度自适应**/ float:left;  /**宽度自适应**/ position: relative; }
CSS ul标签内多个li 标签高度自适应填充
05-11
要让 `ul` 中的多个 `li` 标签高度自适应填充，可以通过以下 CSS 代码实现： ```css ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } li { flex: 1; padding: 10px; box-sizing: border-box; } ``` 上述代码中，我们使用了 Flexbox 布局来让 `li` 标签自适应填充。`ul` 元素设置了 `display: flex;` 和 `flex-wrap: wrap;` 属性，使得 `li` 元素可以自动换行。为了去掉 `ul` 标签的默认样式，我们还加了 `list-style: none;`、`padding: 0;` 和 `margin: 0;` 属性。 `li` 元素设置了 `flex: 1;` 属性，使得每个 `li` 标签可以平均分配剩余空间。同时，我们还设置了 `padding: 10px;` 和 `box-sizing: border-box;` 属性，使得 `li` 标签内部的元素可以自适应填充，而不会因为 padding 而超出父元素的大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值