我嘗試構建一個動態工具欄，其中：工具的數量是動態的所有工具應具有相同的寬度（基于最寬的工具）工具可以通過分隔符分隔，該分隔符占用所有可用空間（拉伸）分隔符可以放置在任何地方html無法更改預期輸出（給定BBB最廣泛的工具）：—————————————————————————————————————————————————————| A |BBB| CC| SEPARATOR | D |—————————————————————————————————————————————————————柔性我嘗試了該flex方法，但無法合并所有規則：分隔符占據了所有空間，但工具寬度不相等：—————————————————————————————————————————————————————|A|BBB|CC| SEPARATOR |D|—————————————————————————————————————————————————————nav { display: flex; background: #e8e8e8; width: 100%;}.item { flex: 1; text-align: center;}.separator { width: 100%; background: #d3d3d3;}<nav> <div class="item">A</div> <div class="item">BBB</div> <div class="item">CC</div> <div class="separator"></div> <div class="item">D</div></nav>所有工具（包括分隔符）都具有相同的寬度：—————————————————————————————————————————————————————| A | BBB | CC | SEPARATOR | D |—————————————————————————————————————————————————————nav { display: flex; background: #e8e8e8; width: 100%;}.item { flex: 1; text-align: center;}.separator { flex: 1; background: #d3d3d3;}<nav> <div class="item">A</div> <div class="item">BBB</div> <div class="item">CC</div> <div class="separator"></div> <div class="item">D</div></nav>網格使用grid系統，如果不指定 a ，我就無法獲取分隔符grid-template-columns，這是我想避免的。我需要一些動態的東西。nav { display: flex; background: #e8e8e8; width: 100%;}.item { flex: 1; text-align: center;}.separator { flex: 1; background: #d3d3d3;}<nav> <div class="item">A</div> <div class="item">BBB</div> <div class="item">CC</div> <div class="separator"></div> <div class="item">D</div></nav>如果沒有 CSS 解決方案，我愿意接受 JavaScript 解決方案。感謝您的幫助。
1 回答
森林海
TA貢獻2011條經驗 獲得超2個贊
通過 javascript ，您可以循環遍歷 .item 并查找最寬的，然后更新自定義 css 屬性。
通過 js 和 flex 的可能示例
var bigW = "0";
for (let e of document.querySelectorAll("nav .item")) {
elW = e.offsetWidth;
if (elW > bigW) {
bigW = elW;
}
document.documentElement.style.setProperty("--myW", bigW + 1 + "px");
}
nav {
display: flex;
background: #e8e8e8;
width: 100%;
}
.item {
min-width: var(--myW, 3em);
text-align: center;
}
.separator {
flex: 1;
background: #d3d3d3;
}
nav div+div {
border-left: solid;
}
<nav>
<div class="item">A</div>
<div class="item">BBB</div>
<div class="item">CC</div>
<div class="separator"></div>
<div class="item">D</div>
</nav>
從下面的評論編輯
var bigW = "0";
for (let e of document.querySelectorAll("nav > div")) {
elW = e.offsetWidth;
if (elW < 7) {// includes partially possible border and padding, mind it
e.style.flexGrow = 1;
} else if (elW > bigW) {
bigW = elW;
}
}
document.documentElement.style.setProperty("--myW", bigW + 1 + "px");
nav {
display: flex;
background: #e8e8e8;
}
.item {
min-width: var(--myW, 0);
text-align: center;
border: solid 1px;
}
.separator {
background: #d3d3d3;
}
<nav>
<div class="item">A</div>
<div class="item">BBBBBBBB</div>
<!--<div class="separator"></div>-->
<div class="item">CC</div>
<div class="separator"></div>
<div class="item">D</div>
</nav>
- 1 回答
- 0 關注
- 128 瀏覽
添加回答
舉報
0/150
提交
取消