如何创建一个扩展到边缘的浮动div？

Question

我想创建一个像这样的导航栏：名称位于左上角，div 位于其右侧，如果它不浮动，它会扩展到右边缘，就像通常一样。这是一个快速说明：

                         \/margin
---------------------------|
     |-------------------| |
NAME | link1 link2 etc.  | |
     |-------------------| |
                           |
(whatever goes below)      |
---------------------------|

我遇到的问题是我不知道如何让div在浮动时扩展到正确的长度，它更像是这样的：

            \________/much larger than margin          
---------------------|
     |-----|         |
NAME | a b |         |
     |-----|         |
---------------------|

而不是

                   \/margin
---------------------|
     |-------------| |
NAME | a b         | |
     |-------------| |
---------------------|

我能想到的唯一方法是以某种方式使用 padding-right，但我不知道它需要多长时间，尤其是在不同的屏幕尺寸下。我尝试使用 padding-right 只是为了尝试一下，但预计在调整屏幕大小时它根本不起作用。请帮助我，谢谢。

Answer 1

您可以使导航栏元素填充整个宽度，并使其成为弹性框。然后对于链接 div，您可以将其弹性增长设置为 1。

这应该可以完成工作。您不需要浮动任何元素。

#nav{
  display: flex;
  flex-direction: row;
  width: 100vw;
}

#links{
  flex: 1
}