Javascript 元素宽度以匹配其他元素的水平位置

假设我们有一个包含元素的导航div。导航div下面有一些必须扩展到与其中一个导航元素匹配的宽度的栏（本例中为第三个）

---

有没有办法创建这样一个即使在缩放浏览器时也能正常工作的功能？我的代码可能有什么问题？纯css有没有可能做到这一点？

这是一个概念证明

您可以结合使用自定义的

HTML5数据-*

属性和导航菜单上的

伪元素后的
：（以及少量javascript）来指示您最近选择的菜单项

尽管有少量javascript，但大部分工作都是使用CSS完成的

工作示例：


var菜单=document.querySelector（'nav ul'）；
var menuItems=[…menu.getElementsByTagName（'li'）；
功能选择菜单（）{
menu.dataset.selectedMenu=（menuItems.indexOf（this）+1）；
}
对于（变量i=0；i

nav-ul{
显示器：flex；
位置：相对位置；
保证金：0；
填充：0；
}
李海军{
flex:060px；
填充：12px 12px 24px；
颜色：rgb（255、255、255）；
背景色：rgb（255,0,0）；
列表样式类型：无；
光标：指针；
}
导航ul：：之后{
内容：''；
位置：绝对位置；
底部：0；
左：0；
高度：12px；
背景色：rgba（0,0,0,0.5）；
过渡：宽度0.6s线性；
}
导航ul[所选数据菜单=“1”]：：之后{
宽度：80px；
}
导航ul[所选数据菜单=“2”]：：之后{
宽度：160px；
}
导航ul[所选数据菜单=“3”]：：之后{
宽度：240px；
}
导航ul[所选数据菜单=“4”]：：之后{
宽度：320px；
}
导航ul[所选数据菜单=“5”]：：之后{
宽度：400px；
}


菜单1
菜单2
菜单3
菜单4
菜单5

这是一个概念证明

您可以结合使用自定义的
HTML5数据-*
属性和导航菜单上的
伪元素后的
：（以及少量javascript）来指示您最近选择的菜单项

尽管有少量javascript，但大部分工作都是使用CSS完成的

工作示例：


var菜单=document.querySelector（'nav ul'）；
var menuItems=[…menu.getElementsByTagName（'li'）；
功能选择菜单（）{
menu.dataset.selectedMenu=（menuItems.indexOf（this）+1）；
}
对于（变量i=0；i

nav-ul{
显示器：flex；
位置：相对位置；
保证金：0；
填充：0；
}
李海军{
flex:060px；
填充：12px 12px 24px；
颜色：rgb（255、255、255）；
背景色：rgb（255,0,0）；
列表样式类型：无；
光标：指针；
}
导航ul：：之后{
内容：''；
位置：绝对位置；
底部：0；
左：0；
高度：12px；
背景色：rgba（0,0,0,0.5）；
过渡：宽度0.6s线性；
}
导航ul[所选数据菜单=“1”]：：之后{
宽度：80px；
}
导航ul[所选数据菜单=“2”]：：之后{
宽度：160px；
}
导航ul[所选数据菜单=“3”]：：之后{
宽度：240px；
}
导航ul[所选数据菜单=“4”]：：之后{
宽度：320px；
}
导航ul[所选数据菜单=“5”]：：之后{
宽度：400px；
}


菜单1
菜单2
菜单3
菜单4
菜单5

当您将元素向右浮动时，首先必须获得文档的宽度，然后从该数量中排除从文档左侧到元素右侧的宽度：


函数初始化progressorpos（）{
var elementRight=$（文档）.width（）-$（'.main\u nav\u btn:eq（2）'）.offset（）.left-$（'.main\u nav\u btn:eq（2）'）.width（）；
$（“#main#u navigator_progression”）.css（{“width”：elementRight+“px”}）；
}
初始化progressorpos（）；
$（窗口）。调整大小（函数（）{
初始化progressorpos（）；
});
正文{
保证金：0；
溢出y：滚动；
}
#主导航器{
位置：固定；
背景色：黑色；
宽度：100%；
}
#主导航器上部{
位置：相对位置；
显示器：flex；
弯曲方向：行；
}
#主导航图标{
宽度：416px；
高度：120px；
背景色：白色；
}
#主导航器{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
柔性生长：1；
弹性收缩：1；
填充：0；
右：5%；
文本对齐：居中；
边际上限：0px；
高度：98px；
列表样式类型：无；
}
#主导航器{
柔性生长：1；
弹性收缩：1；
/*弹性基准：0*/
弹性基础：自动；/*新*/
}
#主导航器1{
flex-grow:0.1！重要；
}
#主导航器1里。主导航器btn{
颜色：白色；
显示：块；
身高：100%；
字体系列：“nexa_粗体”；
字号：0.9em；
文字装饰：无；
}
#主导航器1{
显示：内联块；
宽度：2倍；
高度：35px；
背景色：#B28039；
}
#主导航器注册表框{
位置：相对位置；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
列表样式类型：无；
边际：0px；
填充：0px；
}
#主导航器{
显示：内联块；
flex-grow:0.1；
弹性收缩：0.1；
}
#签到{
显示：块；
光标：指针；
空白：nowrap；
文字装饰：无；
颜色：#B28039；
字号：0.9em；
字体系列：“nexa_light”；
}
#注册{
显示：块；
空白：nowrap；
文字装饰：无；
颜色：白色；
字号：0.9em；
字体系列：“nexa_light”；
}
#主导航器注册表框s1{
显示：内联块；
宽度：1.4px；
身高：13.5px；
背景色：白色；
}
#主导航器底部{
背景色：黑色；
高度：24px；
}
#主导航器前进{
位置：相对位置；
背景色：#B28039；
身高：100%；
宽度：416px；
浮动：对；
}




<div id="main_navigator">
        <div id="main_navigator_upper">          
            <a id="main_navigator_logo" src="/"></a>
            <ul id="main_navigator_r1">
                <li>
                    <a class="main_nav_btn">BTN 1</a>
                </li>
                <li>
                    <a class="main_nav_btn">BTN 2</a>
                </li>
                <li>
                    <a class="main_nav_btn">BTN 3</a>
                </li>
                <li>
                    <a class="main_nav_btn">BTN 4</a>
                </li>
                <li id="main_navigator_l1">
                    <div id="main_navigator_s1"></div>
                </li>
        <li>
          <ul id="main_navigator_regbox">
            <li>
              <p id="regbox_signin">sign in</p>
            </li>
            <li>
              <div id="main_navigator_regbox_s1"></div>
            </li>
            <li>
              <a id="regbox_signup" href="sign_up">sign up</a>
            </li>
          </ul>
                  </li>
            </ul>
        </div>
        <div id="main_navigator_bottom">
            <div id="main_navigator_progression"></div>
              </div>
    </div>

function initializeProgressorPos() {
    document.getElementById("main_navigator_progression").setAttribute("style", ("width: " + (document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().x - document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().width) + "px"))
}
initializeProgressorPos();
$(window).resize(function() {
    initializeProgressorPos();
});