4

我有这个问题：如下图所示，我使用的布局在第一行中只有一个元素，但它有这个奇怪的右对齐问题（它延伸得太远了）。

在此处输入图像描述

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>
4

2 回答 2

3

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

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

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

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

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

贴一些 CSS 代码！然后，我们可以进一步帮助您。

于 2014-04-08T07:23:29.143 回答
0

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

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

于 2014-05-02T19:56:39.287 回答