html - 在 html5 元素之间设置空间

Question

我正在尝试创建一个具有 2 列结构的简单 html 文件。我管理了它，但正如您在 JSFiddled 演示中看到的那样，每个元素之间没有空格。我尝试了边距和填充但失败了。例如，如何在输入元素之间放置一些空间？

这是我的CSS：

    .left
    {
    position:relative;
    left:10px;      
    }

    .right
    {
    position:fixed;
    left:300px;   
    }

score 1 · Accepted Answer

您还可以使用p元素来包围您的标签字段匹配项，而不是使用br换行符，并且仍然是有效的 HTML。

例如：

<p>
    <label for="foo">Foo:</label>
    <textarea id="foo"></textarea>
</p>

这是一个小提琴。

score 0 · Accepted Answer

Try this using inline-block for this type of thing:

.left {
    display: inline-block;
    width: 300px;
    margin-left: 0.6em;
}
label, input, select {
    margin: 0.5em 0;
}

score 0 · Accepted Answer

试试这个，但你为什么要使用相对标签并固定输入位置？

.left {
    display: inline-block;
    left: 10px;
    margin-bottom: 10px;
    position: relative;
}

score 0 · Accepted Answer

.left { 位置：相对；左：10px；宽度：300 像素；向左飘浮; 显示：块；}

    .right
    {
        position:relative;
        left:0px;
        display:block;
    }

这适用于您的 jsfiddle。在那里测试过。如果需要，可以添加更多边距。display:block 可以解决问题

4 回答 4