水平表格输入重叠

Question

我无法正确显示表单。以下两行是水平显示，但它们相互重叠，名称结束，电子邮件开始。我们目前没有实施任何CSS，我已尝试padding-left，margin-left和其他一些技巧，但无法将它们分开。有什么想法吗？

<div id="contact" class="col-xs-6 col-md-6 col-lg-6">
<div class="center hero-unit">
    <form action="success.html" method="GET">
            <h4> Contact Me </h4>
            <div class="form-group">
            <div class="col-sm-4 col-md-4 col-lg-4">
                <input type="text" placeholder="Name" size="20" id="inline">
            </div>
            <div class="col-sm-4 col-md-4 col-lg-4">
                <input type="text" placeholder="Email Address" size="35" id="inline">
            </div>
            </div>
    </form>
</div>
</div>

包含hero-unit的CSS，以防引起问题

.hero-unit {
    text-align: center;
    background-color: #9C9C9C;
    font-size: 11px;
    margin: 30px;
    padding: 30px;
    line-height: 1.4em;
    border-color: #C1C1C1;
    color: white;
}

Answer 1

只需添加样式：

.hero-input {
    padding:5px;
    margin: 10px;
    display:inline-block;
}

和输入：

class="hero-input"

使边距和填充对每个输入生效。显然你可以根据自己喜欢的填充和边距来修改它。基本上边距应该在输入中或包含输入的div中。此外，您应该避免使用重复的ID。 id="inline"应该是class="inline"，如果你使用额外的英雄输入类，那么它可能是class="inline hero-input"