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 =＆＃34; submitEventButtonDiv＆＃34; ，其中包含2个包含2个输入字段的div。

显然，当显示2输入字段时，一个在另一个下面（因为它们包含在作为块元素的div中）。

如何在另一个旁边显示一个？（我无法删除包含每个输入字段的div，因为它是由我正在使用的标记库自动呈现的，我发布的这是从我们使用Struts 2标记库的页面获取的呈现HTML 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？

5 个答案: