jQuery元素宽度与检查模式元素宽度

Question

我试图循环测量页面上的元素，然后从包含元素的宽度中减去它。但是，当我使用.width()时，它不会返回检查元素时得到的相同值。我也尝试过inner和outer的宽度。即使如此，似乎仍无法准确获取宽度，因为我正在做的是获取跨度中的文本宽度，例如，第一个文本被包裹在称为smoked pit wings的跨度中，我们计算该宽度，减去从h5的总宽度开始，我们应该得到dotted元素的宽度，您可以在下面看到一张图片来说明这一点，但是点和数字应该在右边对齐，但是它们确实可以不是。

任何帮助都会很棒

到目前为止，这是我的代码

var colWidth = $(".food-menu__column").width();
var array = [];

$('.food-menu__item').each(function(i, obj) {
    var width = $(obj).width();    
    array.push(width);      
});

console.log(colWidth);
console.log(array);  

$('.dotted').each(function(i, obj) {
    var widthDotted = colWidth - array[i];
   $(obj).width(widthDotted);  
   console.log(widthDotted);      
});

这是代码外观的布局图，点间距元素应为容器列的宽度减去左侧文本的宽度，然后价格和点应匹配左边，但它们略微偏离，但我不明白为什么，因为jquery至少应该对它们进行相同的测量。

这是生成的html的图像

Answer 1

我将CSS与flexbox一起使用，而不用担心计算/设置宽度。也可以使用CSS通过其他方式完成此操作，但这似乎是更简单的解决方案。

.container {
  display: flex;
}

.column.left, .column.right  {
  width: auto;
  flex: 0 0 auto;
  margin-top: 5px;
  padding-right: 4px;
  padding-left: 4px;
}

.column.center {
  flex: 1;
  text-align: center;
  border-bottom: 2px dotted black;
  margin-bottom: 10px;
}

<div class="container">
  <div class="column left">Pizza Pie</div>
  <div class="column center">&nbsp;</div>
  <div class="column right">$11.99</div>
</div>
<div class="container">
  <div class="column left">Ice</div>
  <div class="column center">&nbsp;</div>
  <div class="column right">$0.99</div>
</div>

Answer 2

元素的默认布局为CSS Box Model。在该模型中，为.highcharts-data-labels.highcharts-bar-series { /* Stretch the labels container across the whole chart area: */ right: 0; } .highcharts-label.highcharts-data-label, .highcharts-label.highcharts-data-label span { /* Disable the default label placement.. */ left: auto !important; /* ..and put them along the right side of the container */ right: 8px; } 或width返回的默认大小不考虑填充，边框或边距。首先，这总是令人困惑，并且经常是为什么您会发现即使设置了元素的大小，但通常会渲染出比该值大一点的原因。

但是，offsetWidth的DOM API可以。

Answer 3

嗯，这不是开箱即用的，但是您可能想尝试此解决方案。

p {
background:inherit;
  width: 70%;
  max-width: 40rem;
  min-width: 300px;
  margin: 0 auto;
  position:relative;
}
p:before {
  content: '';
  position: absolute;
  bottom: .2rem;
  width: 100%;
  height: 0;
  line-height: 0;
  border-bottom: 2px dotted #ddd;
}
.desc {
  background: inherit;
  display: inline;
  z-index: 1;
}
.price {
  position: absolute;
  min-width: 4rem;
  bottom: 0;
  right: 0;
  padding-left: .2rem;
  text-align: right;
  z-index: 2;
}
.price:after {
  content: '$';
}

<p>
  <span class='desc'>Some item</span>
  <span class='price'>Price</span>
</p>
<p>
  <span class='desc'>Some item - 2</span>
  <span class='price'>Price -2</span>
</p>