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

概述我有这个问题：正如你在下面的图片中看到的那样,我使用的是第一行中只有一个元素的布局,但它有一个奇怪的右对齐问题(它向右延伸得太远). HTML CSS 问题是什么？ 这是我的第一个元素： <li data-row="1" data-col="1" data-sizex="15" data-sizey="3" > <div data-id="some-id" data-view="MyWidge 我有这个问题：正如你在下面的图片中看到的那样,我使用的是第一行中只有一个元素的布局,但它有一个奇怪的右对齐问题(它向右延伸得太远).

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" ></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" >

这是完整的仪表板布局：

<% content_for :Title do %>Dashboard<% end %><div >  <ul>    <!-- Hack: Setting wIDth of top row to 1640px! -->    <li data-row="1" data-col="1" data-sizex="15" data-sizey="3" >      <div data-ID="ID1" data-vIEw="OwnWidget" ></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" ></div>    </li>    <li data-row="4" data-col="11" data-sizex="5" data-sizey="4">      <div data-ID="ID4" data-vIEw="Number" ></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" ></div>    </li>    <li data-row="8" data-col="11" data-sizex="5" data-sizey="4">      <div data-ID="ID7" data-vIEw="Number" ></div>    </li>  </ul></div>

解决方法 没有任何CSS代码,我无法帮助您,除了以下内容：

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

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

这可能(这里没有定义)解决你的问题,因为它使用减法计算填充 – 而不是添加,这可能会解决你的问题.

这是一篇关于盒子大小的文章,来自MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing,另一篇来自css-Tricks http://css-tricks.com/box-sizing/.他们应该能够帮助你进一步确定问题.

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

总结

以上是内存溢出为你收集整理的html – Dashing仪表板中的第一行未对齐全部内容，希望文章能够帮你解决html – Dashing仪表板中的第一行未对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。