设置显示：内联2格不起作用

Question

我试图使用“ display：inline”在另一个div旁边显示一个div。 但是，我似乎无法使其工作。 我有一个父母div（父母和监护人），里面有2个div（学生-父母-容器和学生监护人-其他容器）。 我正在尝试将这2个div并排显示。

<div id="parent-and-guardian" class="tab">
    <div id="student-parent-container">
        <fieldset id="student-father-info">
            <legend class="form-legend">Father Information</legend>
            <div>
                <label class="form-label">Name:</label>
                <input type="text" class="form-input form-input-long"></input>
            </div>
            <div>
                <label class="form-label">Contact No.:</label>
                <input type="text" class="form-input form-input-long"></input>
            </div>
        </fieldset>
        <fieldset id="student-mother-info">
            <legend class="form-legend">Mother Information</legend>
            <div>
                <label class="form-label">Name:</label>
                <input type="text" class="form-input form-input-long"></input>
            </div>
            <div>
                <label class="form-label">Contact No.:</label>
                <input type="text" class="form-input form-input-long"></input>
            </div>
        </fieldset>
    </div>
    <div id="student-guardian-other-container">
        <fieldset id="student-guardian-info">
            <legend class="form-legend">Guardian Information</legend>
            <div>
                <label class="form-label">Name:</label>
                <input type="text" class="form-input form-input-long"></input>
            </div>
            <div>
                <label class="form-label">Relation:</label>
                <input type="text" class="form-input form-input-long"></input>
            </div>
        </fieldset>
    </div>
</div>

这是CSS：

#student-parent-container {
    display: inline;
}

#student-guardian-other-container {
    display: inline;
}

我希望监护人信息位于父亲信息和母亲信息的右侧。

这是jsFiddle的链接： 测试

Answer 1

对于本机块元素，最好应用display: inline-block; 元素仍将显示块元素显示效果（例如，内联元素的设置高度什么都不做，而块元素的高度却发生变化）。 同样，您的方块可能会导致页面上的其他顶部位置不同。 这就是为什么我添加了vertical-align: top （仅适用于内联和内联块元素）：

 #student-parent-container { display: inline-block; vertical-align: top; } #student-guardian-other-container { display: inline-block; vertical-align: top; } 

 <div id="parent-and-guardian" class="tab"> <div id="student-parent-container"> <fieldset id="student-father-info"> <legend class="form-legend">Father Information</legend> <div> <label class="form-label">Name:</label> <input type="text" class="form-input form-input-long"></input> </div> <div> <label class="form-label">Contact No.:</label> <input type="text" class="form-input form-input-long"></input> </div> </fieldset> <fieldset id="student-mother-info"> <legend class="form-legend">Mother Information</legend> <div> <label class="form-label">Name:</label> <input type="text" class="form-input form-input-long"></input> </div> <div> <label class="form-label">Contact No.:</label> <input type="text" class="form-input form-input-long"></input> </div> </fieldset> </div> <div id="student-guardian-other-container"> <fieldset id="student-guardian-info"> <legend class="form-legend">Guardian Information</legend> <div> <label class="form-label">Name:</label> <input type="text" class="form-input form-input-long"></input> </div> <div> <label class="form-label">Relation:</label> <input type="text" class="form-input form-input-long"></input> </div> </fieldset> </div> </div> 

Answer 2

#parent-and-guardian {
    display: flex;
}

它将使其并排显示。 查看https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties