网站是做流程,什么是网络营销代理,15个网页设计的案例,wordpress sae部署目标#xff1a;实现左右各有按钮#xff0c;中间是内容#xff0c;自适应显示中间的内容导航栏#xff0c;即 根据中间的宽度大小显示内容。 自适应导航栏
总结#xff1a;推荐 flex布局 / grid布局
flex布局#xff1a; 两侧 flex:1; -----中间自适应
grid布局实现左右各有按钮中间是内容自适应显示中间的内容导航栏即 根据中间的宽度大小显示内容。 自适应导航栏
总结推荐 flex布局 / grid布局
flex布局 两侧 flex:1; -----中间自适应
grid布局1fr ----代码为 grid-template-columns: 1fr auto 1fr; 主要参考文章CSS 实现自适应导航栏 法一flex方法
父盒子设置弹性布局 display: flex;
中间的盒子为 flex:1 再设置文本居中
问题看着像居中一旦右边宽度差异很大就不居中了。 左右侧有按钮中间部分自适应居中。 flex:1; 让子元素平均分配剩余空间 3个子元素都设置 flex: 1; 就会平分3等分。 法二绝对定位
子元素 绝对定位position: absolute; left: 0;right: 0; text-align: center;可实现整体居中
问题文本过长则左右功能区会发生重叠。 法三flex布局推荐 flex布局实现若 仅设置两边的 flex:1;中间宽度不设置那么中间的宽度会自适应内容宽度。 ---两边宽度相等中间居中。 法四 grid布局1fr推荐
display: grid;
grid-template-columns: 1fr auto 1fr; grid中的 1fr类似于 flex 中的 flex:1; 参考
css导航自适应div - 老白网络
【web】一个自适应的导航栏前端设计只含HTMLCSS-CSDN博客
https://www.cnblogs.com/mllt/p/web-img-text-align-center.html
css自适应头部导航栏 - 老白网络
