极客观点
项目管理
HarmonyOS
类似效果：
问题：父元素宽度自适应浏览器窗口宽度，那么其中的子元素如何水平均匀分布呢（包含左右外边距）？
需要兼容ie8不考虑flex等css3布局。
html5
1.首尾外边距 2% 中间外边距1% 占据7%父元素的宽度 在拼接html时动态添加进去
2.每个元素本身占据 93%/元素个数 <li style="width:'+(93/itemsLength).toFixed(6)+'+'%';float:left;display:inline-block"><li>
<style>
.bg {
padding: 15px 30px;
background-color: #e1e1e1;
}
.ul-wrapper {
padding-left: 0;
margin-right: -15px;
}
.ul-wrapper::after {
display: block;
content: '';
clear: both;
}
.li-item {
float: left;
width:25% ;
box-sizing: border-box;
border-right: 15px solid transparent; // 15px 和 .ul-wrapper的 margin-right：-15px 对应
list-style-type:none;
}
.color {
height: 150px;
background-color: #08c;
}
</style>
<html>
<!-- margin 等分布局 -->
<div class="bg">
<p >管理中心</p>
<ul class="ul-wrapper">
<li class="li-item">
<div class="color"></div>
</li>
<li class="li-item">
<div class="color"></div>
</li>
<li class="li-item">
<div class="color"></div>
</li>
<li class="li-item">
<div class="color"></div>
</li>
</ul>
</div>
</html>最近在看张鑫旭的《css世界》 参考了他的方法
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}10 回答11.7k 阅读
前端代码更新如何通知用户刷新页面？
前端代码更新如何通知用户刷新页面？2 回答3.2k 阅读✓ 已解决
字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？
尝试一下字节的 trae AI IDE ([链接])安装后导入 vscode 的配置，好像一起把 vscode 的插件也导入了也能看到 vscode 之前配置的 ssh remote 但是连不上看到「输出」如下⬇️ {代码...}2 回答4.3k 阅读✓ 已解决
css布局怎么保证右边一直在可视范围内？
如下：灰色和红色的高度都不确定，怎么保证左边高度太高需要滚动时右边一直能在可视范围内？ {代码...}5 回答2.2k 阅读
请问开发React Native，一般是推荐哪个主流的UI库呢？
请问开发React Native，一般是推荐哪个主流的UI库呢？我们知道React有antd，但是React Native的话好像React Native Mobile RN不是最主流的。3 回答1.9k 阅读✓ 已解决
想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？
想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？或者那种插件兼容性会比较好呢？5 回答832 阅读
H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？
H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓手机变成下载了？需要在移动端也是预览怎么实现呢？ {代码...}3 回答1.7k 阅读✓ 已解决
父元素宽度百分比，里面框框inline-block且宽度百分比，然后给框框加外边距百分比。另外框框外边距设为百分比这个百分比是根据父元素宽度来定的，所以所有框框宽度(%)加上所有框框所有外边距(%)=父元素宽度(即100%)即可。
补充：用inline-block元素与元素间会多出间隙导致间距偏大，这个问题你搜搜怎么解决，详细的就不在这展开了。