Javascript 如何在下一个div之前让这个锚定标签填充空间？

我一直在尝试创建一个引导下拉框，里面有一些额外的按钮。我已经对主要功能进行了分类，但美学方面并不完全正确

我遇到的问题是，锚元素没有填满右侧按钮的空间。我尝试过使用

块

和

内联块

的不同组合进行试验，我在别处读到的这些组合应该会填满空间，但当它这样做时，它会将按钮向下推到下一行。当我设法使按钮和锚元素位于同一行时，锚的选择区域不会一直延伸到按钮

我目前正在努力工作，但运气不佳，如果有人能提供任何帮助，我将不胜感激

更新：

感谢@Matus Jurika建议使用

calc

调整锚定元件的尺寸

---

更新的工作提琴：

这应该可以

.comboItemContainer {
    width: 100%;
    position: relative;
}

.anchorDiv {
    display: inline-block;
    width: 100%;
    padding: 0 80px 0 0;
}

.comboButtons {
    width: 74px;
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
}

我将容器设置为相对的，这样我就可以在其子对象上自由使用绝对定位，相对于容器的原点为（0,0）。然后我将按钮设置为绝对值，将其设置为顶部0和右侧0。增加了100%宽度的锚和80像素的填充权

这看起来可能有点骇人，但我在Flex中不是很好，在网格中绝对是零

---

这几乎可以肯定是跨浏览器的，尽管我建议使用calc作为宽度：

.anchorDiv {
    display: inline-block;
    width: calc(100% - 74px);
}

工作小提琴：

---

这是您的解决方案的片段。我只是在使用bootstrap

row

class

.comboRow{
利润底部：3倍；
}
.组合项目{
显示：块！重要；
/*宽度：67%*/
}
.组合按钮{
浮动：对；
利润上限：3倍；
宽度：74px；
显示：块；
}
.comboItemContainer{
宽度：100%；
显示：内联块；
}
安科迪夫先生{
显示：内联块；
}
.结束{
/*浮动：对*/
/*右边距：10px*/
}
.close.edit{
右边距：5px；
}
#预设下拉按钮{
位置：绝对位置；
}
.字形图标{
字体大小：15px；
}
#预设下拉列表{
宽度：最大含量；
}
#新预设条目{
宽度：50%；
高度：24px；
左边距：18px；
左侧填充：6px；
右边填充：6px；
}
.下拉菜单>li>div>div>a{
填充：3px20px；
明确：两者皆有；
字体大小：400；
线高：1.42857143；
颜色：#333；
空白：nowrap；
显示：块；
}
.下拉菜单>li>分割>分割>a:焦点{
颜色：#262626；
文字装饰：无；
背景色：#F5；
}
.下拉菜单>li>div>div>a:悬停{
颜色：#262626；
文字装饰：无；
背景色：#F5；
}
.pl-0{
左侧填充：0！重要；
}
.pr-0{
右填充：0！重要；

预设


&时代；
✎
💾


&时代；
✎
💾


&时代；
✎
💾

感谢@Merigold的回复，这个答案绝对是我可以使用的选项，并且确实实现了我的目标。但是，由于它的简单性，我将Matus Jurika的答案标记为被接受的答案。不过这是一个非常接近的第二秒。每天都是@Merigold的学校日！感谢你的回复@Matus Jurika。我从未想到过这一点在调整尺寸时使用calc。鉴于我的按钮div始终是一个固定大小，这似乎最有意义。有时最简单的解决方案是最好的解决方案，因此我将其标记为答案注：链接的小提琴并不反映答案中建议的内容，但一旦实现，它确实会影响我的回答糟糕，我现在更新了fiddle。很高兴我帮了忙。感谢@Hamid R的建议。我以前从未有过boostrap行的经验，但它看起来是一个有趣的概念。从运行代码片段来看，它似乎没有完全正确地显示图标，但这可能是由于浏览器不兼容的问题（我使用的是Chrome）。当我下次需要使用行和列来安排项目时，我一定会记住这一点