如何并排显示这 2 div？

Question

进入一个页面我有以下

<div id="submitEventButtonDiv">
    <div id="wwctrl_backButton" align="right">
        <input id="backButton" type="submit" onclick="return clickSubmitButton();" value="Back">
    </div>

    <div id="wwctrl_submitEventButton" align="right">
        <input id="submitEventButton" type="submit" onclick="return clickSubmitButton();" value="Submit">
    </div>
</div>

如您所见，有一个外部 div 具有 id="submitEventButtonDiv"，其中包含 2 个 div，依次包含 2 个输入字段。

很明显，当显示 2 个输入字段时，它们会一个接一个地出现（因为它们包含在 div 块元素中）。

如何将一个显示在另一个旁边？（我无法删除包含每个输入字段的 div，因为它是由我正在使用的标记库自动呈现的，我拥有的 post 是从中获得的呈现 HTML一个我们 Struts 2 标签库按照其逻辑包装 HTML 的页面，所以在这种情况下我只能在 CSS 上工作）

Tnx

Answer 1

根据您的跨浏览器需求，使用 flexbox：

#submitEventButtonDiv {
    display: flex;
}

将使所有子项都为弹性项目，默认情况下，它们会水平堆叠，如您所愿。

Answer 2

只显示内联子元素。

#submitEventButtonDiv > div {
display:inline;
}

codepen 在这里 http://codepen.io/anon/pen/jEmaed

Answer 3

如果您将它们都浮动，它们将并排放置。添加

#submitEventButtonDiv > div {
    float:left;  
    display:inline;  
}

您的 css 应该将它们放在页面的左侧并排放置。

Answer 4

如果内部 div ID 始终相同，那么您可以在 css 中添加以下样式：

div#wwctrl_backButton {
 display: inline-block;
 width: 50%;
}
div#wwctrl_submitEventButton{
 display: inline-block;
 width: 50%;
}

Answer 5

这会产生预期的效果。

#submitEventButtonDiv > div {
display:inline;
float:right;
}

如何并排显示这 2 div？

How can I show this 2 div side by side?

html

css

xhtml