Dashing仪表板中的第一行未对齐

Question

我遇到了这个问题：正如您在下图中看到的那样，我使用的布局在第一行中只有一个元素但它有这种奇怪的右对齐问题（它向右延伸得太远）< /强>

HTML
CSS

有什么问题？

这是我的第一个元素：

<li data-row="1" data-col="1" data-sizex="15" data-sizey="3" >
  <div data-id="some-id" data-view="MyWidget" data-title="Some title" style="background-color:#749396"></div>
</li>

我在application.coffee中使用此设置（15列，9行，每列/每行100像素）：

Dashing.on 'ready', ->
  Dashing.widget_margins ||= [5, 5]
  Dashing.widget_base_dimensions ||= [100, 100]
  Dashing.numColumns ||= 15

当我在li上专门设置宽度时，它可以正常工作。

<li data-row="1" data-col="1" data-sizex="15" data-sizey="3" style="width: 1640px;">

以下是完整的仪表板布局：

<% content_for :title do %>Dashboard<% end %>
<div class="gridster">
  <ul>

    <!-- Hack: Setting width of top row to 1640px! -->

    <li data-row="1" data-col="1" data-sizex="15" data-sizey="3" style="width: 1640px;">
      <div data-id="id1" data-view="OwnWidget" style="background-color:#749396"></div>
    </li>

    <li data-row="4" data-col="1" data-sizex="5" data-sizey="4">
      <div data-id="id2" data-view="Meter" data-min="0" data-max="100"></div>
    </li>

    <li data-row="4" data-col="6" data-sizex="5" data-sizey="4">
      <div data-id="id3" data-view="Number" style="background-color:#749396"></div>
    </li>

    <li data-row="4" data-col="11" data-sizex="5" data-sizey="4">
      <div data-id="id4" data-view="Number" style="background-color:#749396"></div>
    </li>

    <li data-row="8" data-col="1" data-sizex="5" data-sizey="4">
      <div data-id="id5" data-view="Meter" data-min="0" data-max="100"></div>
    </li>

    <li data-row="8" data-col="6" data-sizex="5" data-sizey="4">
      <div data-id="id6" data-view="Number" style="background-color:#749396"></div>
    </li>

    <li data-row="8" data-col="11" data-sizex="5" data-sizey="4">
      <div data-id="id7" data-view="Number" style="background-color:#749396"></div>
    </li>

  </ul>
</div>

Answer 1

没有任何CSS代码，我无法为您提供更多帮助：

这个问题似乎是由填充调整问题引起的。试着写下这个：

li {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

这个 MAY （这里没有定义）可以解决您的问题，因为它使用减法来计算填充 - 而不是添加，这可能会解决您的问题。

以下是来自MDN box-sizing的文章：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing，以及来自CSS-Tricks http://css-tricks.com/box-sizing/的文章。他们应该能够帮助您进一步确定问题。

发布一些CSS代码！然后我们可以帮助你。

Answer 2

在Dashing论坛上提出同样的问题之后，我得到了这个非常令人满意的答案：

https://github.com/Shopify/dashing/issues/339