Question

我有一个页面上有许多定义列表。我试图将这些显示为表格，其中dt漂浮在每个dd的左侧。

我使用CSS将dt浮动到dd的左边并创建了下面的脚本，该脚本计算最宽dt的宽度并在dd上设置左边距等于此宽度加20。

如果页面上只有一个定义列表，则脚本效果很好，但如果有多个定义列表，则这些计算将应用于所有定义列表。

如何将此计算单独应用于定义列表？

这是我的HTML：

<dl class="dl-horizontal">
  <dt>Something</dt>
  <dd>ABC</dd>
  <dt>Something else</dt>
  <dd>DEF</dd>
  <dt>And this</dt>
  <dd>GHI</dd>
</dl>

这是JS：

var widest = 0;

jQuery(".dl-horizontal dt").each(function () { 
    widest = Math.max(widest, jQuery(this).outerWidth()+20); 
}).width(widest);

jQuery(".dl-horizontal dd").each(function () {
    jQuery(this).css('margin-left', widest);
});

Answer 1

这是你想要实现的吗？（在下面运行）

var widest = 0;

$(".dl-horizontal dt").each(function () { 
    widest = Math.max(widest, $(this).outerWidth());
})

$(".dl-horizontal dd").css('margin-left', widest+20 ); // no need for "each" to apply CSS

dl{
 border: blue solid 1px;
  
}

dt{
   border: green solid 1px;
  display: inline;
}

dd{
 border: red solid 1px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="dl-horizontal">
  <dt>Something</dt>
  <dd>ABC</dd>
  <dt>Something else</dt>
  <dd>DEF</dd>
  <dt>And this</dt>
  <dd>GHI</dd>
</dl>

在dl内的每个dd上设置相等的边距

1 个答案: