2

我已经制作了一个带有输入的表格。这些输入的宽度是 100%、75%、50% 和 25%，我应该能够将它们组合成一行（所以是 50/50、25/25/25/25）。

这些输入不能有固定的大小，环绕表单的 div 可以是任何宽度。问题是有以像素为单位的边框和填充，而 CSS 不允许width: 100%-10px;。

我发现的解决方案是添加display: table-cell到包装和 div 包装中display: table。小例子：

<div>
    <span class="Half"><input class="" value="Half"/></span>
    <span class="Half"><input class="" value="Half"/></span>
</div>

使用我的 css 可以完美地工作。如果我在输入中添加填充，填充只会使宽度变小。

问题：当我添加<!DOCTYPE html>时，填充使输入溢出跨度。没有 doctype=没问题，但我想继续使用它。

我做了一个例子：http: //jsfiddle.net/35SSR/

如您所见，输入之间没有间隙，输入溢出表单。这是因为 jsFiddle 也使用了 doctype

有人有什么想法吗？

示例（我希望在 'with doctype' 页面中显示 'no doctype'，必须是跨浏览器）：（来源：lab35.nl） 。
问题的示例图像

4

3 回答 3

3

这里有两个问题：

  1. 为了在标准模式下模拟 quirks 模式（即没有 doctype 的模式），您需要包含box-sizing:border-box样式。注意，如果要支持 Firefox，还需要前缀版本 ( -moz-box-sizing)。较旧的 webkit 浏览器可能还需要前缀。

    您可以将此应用于全局选择器，以便它影响所有元素或仅影响span元素（因为那些是需要它的元素）。

    你需要这个的原因是因为跨度设置为百分比宽度，你想加起来为 100%。但在标准模式下的默认行为中，边框、填充和边距被添加到框外，所以你的 50% 宽度实际上变成了 50% 加和额外的 5px 边框等。这就是它溢出的原因。

    该border-box设置将其切换到与 quirks 模式的工作方式非常相似的模式，即边框等放在框内，因此如果您要求 50% 宽的框，它将是 50% 宽，即使它有边框或填充。

  2. 第二点是，display:table除非display:table-cell您在它们之间还有另一层标记设置为display:table-row. 所以如果你想继续使用表格布局样式，你应该添加这个。

    但是，无论如何，您的布局并不适合表格格式。float:left这是应该在哪里使用的完美示例。我通常不喜欢花车，但这是我会说使用它的一种情况，因为这几乎正是他们发明它们时想到的用例。

考虑到这些要点，我已经使用浮点数和 box-sizing 完全重写了您的 jsFiddle 代码，并为您生成了与您的预期效果完全相同的 CSS 代码，而无需对 HTML 标记进行任何更改。

这是更新的小提琴：http: //jsfiddle.net/35SSR/5/

希望有帮助。

于 2013-07-26T11:04:31.880 回答
2

如果你使用box-sizing:border-box; 对于您的输入，您可以使用 width:100% 和 padding:10px;

好的，给你：http: //jsfiddle.net/cmex/35SSR/4/

我添加了-moz-和-webkit-属性，因此它现在可以在 Chrome 28、Firefox 22、IE (8-10)、Safari 5.1.7(Win) 中使用

如果您需要支持早期版本的 IE，您可以使用https://github.com/Schepp/box-sizing-polyfill 来支持 box-sizing

于 2013-07-26T09:30:50.307 回答
0

有时我通过使用表格来解决这个问题。它更容易搭配。

在 HTML 中，

<fieldset>
    <table>
        <tr>
            <td colspan="4"><input class="Full" value="Full"/></td>
        </tr>
        <tr>
            <td colspan="2"><input class="Half" value="Half"/></td>
            <td colspan="2"><input class="Half" value="Half"/></td>
        </tr>
        <tr>
            <td><input class="Quarter" value="Quarter"/></td>
            <td><input class="Quarter" value="Quarter"/></td>
            <td><input class="Quarter" value="Quarter"/></td>
            <td><input class="Quarter" value="Quarter"/></td>
        </tr>
        <tr>
            <td><input class="Quarter" value="Quarter"/></td>
            <td colspan="3"><input class="ThreeQuarter" value="ThreeQuarter"/></td>
        </tr>
        <tr>
            <td colspan="3"><input class="ThreeQuarter" value="ThreeQuarter"/></td>
            <td><input class="Quarter" value="Quarter"/></td>
        </tr>
    </table>
</fieldset>

然后在css中，只是一个简单的

table {
    width: 500px;
}
input {
    width: 100%;
}

必需的。然后您将所有内容都放在一个字段集框中。在此处查看示例

于 2013-07-26T09:57:40.037 回答