在html5元素之间设置空格

Question

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

JSFiddle

这是我的css：

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

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

Answer 1

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

例如：

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

这是fiddle。

Answer 2

使用inline-block尝试此类事情：

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

Answer 3

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

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

Answer 4

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

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

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