获取 span 元素填充 div 中的空间答案

【问题标题】：Getting a span element fill the space in a div获取 span 元素填充 div 中的空间
【发布时间】：2019-02-26 20:19:07
【问题描述】：

我正在尝试这样的事情：

|--------------固定宽度--------------| 标题 1 ...................... 值 1 Title2 ...................另一个值另一个标题........又一个价值

这是我的 html 示例代码：

<div class="container">
  <span class="left">Title</span>
  <span class="center">&nbsp;</span>
  <span class="right">value</span>
</div>

这里是我的 CSS：

.center {
    text-align: center;
    border-bottom: 1px dotted blue;
    display: inline-block;
    outerWidth: 100%;
}

.right {
    display: block;
    border: 1px dotted red;
    float: right;
}

.left {
    display: block;
    text-align: right;
    border: 1px dotted red;
    margin-right: 0px;
    float: left;
}

.container {
    width: 200px;
    border: 1px dotted red;
    padding: 5px;
}

是否可以让 span "center" 展开以填充其他两个 span 元素之间的空间？

jsfiddle 上的代码：http://jsfiddle.net/XqHPh/

谢谢！

【问题讨论】：

您要为此创建和扩展跨度吗？
我想他可能想要一行点...

标签： html css

【解决方案1】：

如果您重新排序 HTML，您可以获得一个简单的解决方案：

<div class="container">
  <span class="left">Title</span>
  <span class="right">value</span>
  <span class="center">&nbsp;</span>
</div>

将两个浮动元素放在.center 元素之前。 .center 元素将处于常规内容流中并环绕左右内容。

CSS：

.center {
    display: block;
    border-bottom: 1px dotted blue;
    overflow: auto;
    position: relative;
    top: -4px;
}

.right {
    float: right;
    margin-left: 10px;
}

.left {
    float: left;
    margin-right: 10px;
}

.container {
    width: 200px;
    border: 1px dotted red;
    padding: 5px;
}

浮动元素时，显示类型计算为块状，无需声明。

另外，对于.center，如果您添加overflow: auto，您会约束块，使其不会超出浮动元素的边缘。因此，您的底部边框不会在标题和值文本下划线。

最后，您可以添加position: relative 并将.center 向上移动几个像素，以使边框更接近文本的基线。

小提琴：http://jsfiddle.net/audetwebdesign/DPFYD/

【讨论】：

【解决方案2】：

为此，您需要像这样更改 html 结构

html

<div class="container">
  <span class="left">Title</span>
  <span class="right">value</span>
  <span class="center">&nbsp;</span>
</div>

这是.center span的css

.center {
    text-align: center;
    border-bottom: 1px dotted blue;
    display:block;
}

jsFiddle File

【讨论】：

这很好。由于.center 元素只是为了视觉效果，它在语义上出现的位置并不重要，所以重新定位是一个很好的调用。
display: inline-block 呢？
@David 内联块会缩小以适应其内容，因此需要做更多工作才能填充左右元素之间的空间。

【解决方案3】：

同时，Flexbox 具有完整的浏览器支持，这允许在没有中心元素的情况下提供更优雅的解决方案。

.left, .right {
    border: 1px dotted red;      
}

.container {
    display: flex;
    justify-content: space-between;
    width: 200px;
    border: 1px dotted red;
    padding: 5px;
}

<div class="container">
  <span class="left">Title</span>   
  <span class="right">value</span>
</div>

【讨论】：