2

在创建 GUI 时，我多次遇到“双边距”问题，其中两个元素定义了相同的边距，最终间隔是我预期的两倍。

我使用的一种解决方案是仅在元素的某些侧面定义边距（例如，如果我希望元素垂直堆叠，则仅在顶部），但是我错过了最后一个元素的底部边距。

你如何处理这个问题？欢迎使用任何语言或框架的示例。

4

4 回答 4

1

尽管有标签，但它确实取决于语言及其 GUI 管理器。有些允许您设置任意间距（就像您正在谈论的那样）。

我对这个问题的主要接触是在 CSS 中，因为那是我日复一日地做的事情。我保持简单：将块项目留在左侧，并且仅在这些项目上使用左侧边距。

这需要您设置宽度并且不适用于所有内容（相对/％宽度是最明显的）......但它在很多时候对我有用。IE6可能会因为它内置的双边距渲染错误而在我的日子里抛出扳手，但它通常只是简单地修复。

对于那些不确定问题在问什么的人：给你想象一个你想在屏幕上显示的框。你想说盒子周围应该有 30px 的边距。现在想象一下你有两个盒子要紧挨着展示。如果您设置绝对 30 像素的边距，那么这些框将相隔 60 像素。求解 x。

于 2009-07-28T17:27:24.133 回答
1

某些语言/框架允许您在“布局”本身中设置边距，当您在每个小部件的基础上设置边距时，不会出现双边距问题。

例如，使用 Qt 中的 QLayout，您可以简单地使用 setSpacing(int size); 在布局对象上设置小部件之间的间距，更高级别的布局（如 QGridLayout）允许您做更复杂的事情。在 Qt 中，如果您还想在父窗口小部件（可能是顶级窗口）的边缘周围留出额外空间，您可以通过调用 setContentsMargins(int left, int top, int right, int bottom); 来设置它。在那个小部件上。

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

于 2009-07-28T19:18:21.650 回答
0

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

如果您仅在元素的某些侧面设置边距或填充，则可以在父元素中使用填充来获得与最后一个元素的正确距离。

于 2009-07-28T17:28:12.400 回答
0

我有两种策略来解决这个问题：

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');
});
于 2009-07-28T19:05:17.337 回答