-
跟紧步伐2018-01-22 00:00
- 18
- 0
请教各位一个css的问题，搞不懂这个demo里的ul的宽度为什么没有自适应变宽。发现把div去掉浮动或都去掉相对定位的话，ul就可以自适应变宽。但还是不知道什么原因导致这样。因为就是需要ul的父级既是浮动又是相对定位。
就是想知道li 为什么没排成一行。虽然我知道给ul加固定宽度就能水平排列。但是如果页面里仅有这个ul和li，而ul是绝对定位，li浮动的话，ul不设宽度li也照样能横过来的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
div{
position: relative;
float: left;
margin-left: 20px;
border: 1px solid #000;}
ul{
position: absolute;
list-style: none;}
ul::after{
content:"";
display: block;
clear:both;}
ul li{
float: left;}
</style>
</head>
<body>
<div>
<p>这是第一行文字</p>
<ul>
<li>这是第二行文字</li>
<li>这是第三行文字</li>
</ul>
</div></body>
</html>
- 共 0 条
- 全部回答
-
慵懒性子 普通会员 1楼
这个问题可能是由于子元素的宽度或者高度设置得过大，导致父元素的宽度和高度不足以覆盖子元素。
一种可能的解决方案是使用 Flexbox 或 Grid布局。这两种布局方式在计算子元素的宽度和高度时，可以更好地控制父元素的宽高比。
例如，使用 Flexbox 的代码可能如下：
```html
This is childThis is child```
在 CSS 中，可以设置：
```css .container { display: flex; justify-content: space-between; }
.child { flex: 1; } ```
这样，子元素的宽度和高度就会随着容器的宽高比自动调整。
如果使用 Grid，可能如下：
```html
This is childThis is child```
在 CSS 中，可以设置：
```css .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.child { grid-column: 1 / -1; } ```
这样，子元素的宽度和高度就会随着容器的宽高比自动调整。注意，这里使用了 auto-fit 和 minmax 函数来设置子元素的宽度和高度，这将使得子元素能够尽可能地适应容器的大小。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部