处理图形用户界面元素之间的“双边缘”问题

有些语言/框架允许您在“布局”本身中设置页边距,当您在 每个控件 基础。

例如,使用qlayout in qt,您可以简单地使用set spacing(int-size);在layout对象上设置小部件之间的间距,而更高级别的布局(如qgridlayout)允许您执行更复杂的操作。在qt中,如果您还需要在 边缘 对于父窗口小部件(可以是顶级窗口),可以通过调用该小部件上的setContentsMargins(int-left、int-top、int-right、int-bottom)来设置它。

我想大多数GUI工具包都有类似的结构。

尽管有标记,但它确实依赖于语言及其GUI管理器。有些允许您设置任意间距(如您所说)。

我对这个问题的主要接触是在CSS中,因为这是我每天都在做的事情。我保持简单:向左浮动块项,并且只在这些项上使用左边距。

这要求您设置宽度,但不适用于所有内容(相对宽度/%最明显)。但这对我来说确实很管用。IE6 可以 在我的一天中抛出扳手,因为它内置了双边缘渲染错误,但它通常只是简单的修复。

对于那些不确定问题是什么的人:想象一下你想要在屏幕上显示的一个方框。你想说的是盒子周围应该有30像素的边缘。现在想象一下,你有两个盒子放在一起。如果设置一个绝对30像素的边距,这些框的间距将为60像素。求解X。

Internet Explorer不会一直正确地折叠页边距,因此,当我们等待IE7的使用量缩小时,更安全的方法是尽可能使用填充。

如果只在元素的某些边上设置了边距或填充,则可以在父元素中使用填充来获得到最后一个元素的正确距离。

我有两种应对策略:

1)给元素一个单边填充,然后在容器的CSS中弥补第一个/最后一个元素的差异。例如。:

<ul>
   <li>Cats</li>
   <li>Dogs</li>
   <li>Birds</li>
</ul>

ul { padding-bottom: 10px; }
ul li { padding-top: 10px; }

2)将类添加到HTML中的第一个/最后一个元素,或者使用jquery(或其他框架)选择器。例如。:

<ul>
   <li class="first">Cats</li>
   <li>Dogs</li>
   <li class="last">Birds</li>
</ul>

ul { padding-bottom: 10px; }
    ul li { padding-top: 10px; }

$(document).ready(function(){
   $('ul li:last').addClass('last');
});