html - 水平表单输入重叠

Question

我无法正确显示表单。以下两行是水平显示的，但它们在 name 结束和 email 开始的地方相互重叠。它们目前没有实现 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"

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