CSS：布局DL作为具有填充的灵活表格

我想使用DL/DT/DD方法来组织我的表单。我需要将它们组织为表格（标签列和值列）。下面的html + css可以正常工作，但直到我为dt和/或dd添加边距或填充为止。CSS：布局DL作为具有填充的灵活表格

<html><head> 
<style> 
dl { 
    width: 100%; 
    overflow:hidden; 
} 

dt { 
    float: left; 
    width: 50%; 
    margin: 0px; 
    padding: 0px; 
} 
dd { 
    float: left; 
    width: 50%; 
    margin: 0px; 
    padding: 0px; 
} 
</style></head> 
<body> 
<dl> 
    <dt>first name</dt> 
    <dd><input /> 
</dl> 
</body></html>

如果我更换：在DT与风格“保证金0像素”，“保证金：5px的”或同为填充，然后DD元素跳到上下一行。

我需要：

为DL
不使用绝对宽度（那是因为我使用的是“50％”为列宽度）
添加一些保证金2列的表格布局/填充到dt/dd

如何添加边距/填充并保持相对宽度（50％/ 50％）？

p.s.我见过很多关于DL和表格布局的类似问题，但我的问题是关于dl +表格布局+相对宽度+填充的组合。我可以用相对宽度或填充来处理它，但不能同时使用两者。

来源

2011-12-12 Shrike

您是否需要支持IE <= 7？ – HerrSerker

如果你想要一张桌子，为什么不使用桌子？ – HerrSerker

@yunzen是的，但我不知道如何为现代浏览器做到这一点，至少 – Shrike

所有你需要的是指定magical property：box-sizing: border-box。然后你可以在不增加宽度的情况下使用填充。

JSFiddle Demo

参见：box-sizing support in ie7

box-sizing地址填充和边框，而不是利润。如果您还想使用保证金，请使用calc()从宽度中减去保证金。例如，如果你想有一个5像素左边距：

dd { 
    margin: 0 0 0 5px; 
    width: calc(50% - 5px); 
}

但是，calc()不IE8工作或更早。

more on calc()

来源

2013-09-13 17:57:19 gilly3

我会在和元素中使用嵌套的DIV或跨度。目前，50％的宽度与需要填充或边距相冲突。

这样的事情会完成同样的事情。

<dt><div style="margin:5px;">first name</div></dt> 
    <dd><div style="margin:5px;"><input /></div></dd>

来源

2011-12-12 17:48:28

关于它的唯一的东西，你可以这样做：

使用JavaScript来获取DL的宽度，然后计算DT的宽度和DD，使这些在width加上margin和所述padding加起来的DL

的100％或设置为第一列的固定宽度和没有宽度为所述第二

或者用DIV包装每个DT和DD的内容，并给这个margin和padding

来源

2011-12-12 17:51:29 HerrSerker

这个答案不再正确。看看我的其他答案 – HerrSerker

我发现现在的解决方案（在淋浴！）

给外DLdisplay:block和一些填充到左边和右边加起来的边距和填充DT和DD。现在100％的DL是内部元素的50％的基础。现在给这些你想要的边距和填充。到现在为止，它不会按要求工作。然而还有一些事情还在后面。分别加上DT和DD的所有边距和填充。并给每个负边距（DT左边，DD右边），因此它们的所有边距和填充加起来为0/naught/niente/nada。 EVoilà！现在您可以选择任意比例的组合，例如30％ - 70％。

dl { 
    display: block; 
    overflow:hidden; 
    padding: 5px 15px 5px 20px; 

} 

/* the -15px in the margin is to compensate for the 5px in the margin and the 2 x 5px in the padding */ 
dt { 
    float: left; 
    width: 30%; 
    margin: 0px 5px 0 -15px; 
    padding: 5px; 
    background: yellow; 
} 
/* the -10px in the margin is to compensate for the 2 x 5px in the padding */ 
dd { 
    float: left; 
    width: 70%; 
    margin: 0px -10px 0 0px; 
    padding: 5px; 
    background: yellow; 
}

http://jsfiddle.net/HerrSerker/AADG7/

来源

2011-12-16 08:19:44 HerrSerker

很好的解决方案。但是谈到dl/dt/dd我觉得很难使用。尝试下面的标记：