如何将多个元素放在 div 的第二行答案

【问题标题】：How do I put several elements on the second row in a div如何将多个元素放在 div 的第二行
【发布时间】：2012-04-16 00:59:18
【问题描述】：

我正在尝试使用 css 来定位 div 中的元素。除了类/ID，我不能使用其他任何东西，因为带有它的内容的 div 是从第 3 方插件（数据表）生成的。因此，我不能自己添加任何标签。

我的问题是我无法在第二行放置多个元素。只有一个位于第二行，接下来的一个位于第三行（彼此相邻..）。

我想要第二行的所有选择元素和第一行的所有其他元素。我希望第一行上的所有元素都位于右侧，第二行一个选择在左侧，一个在中间，一个在右侧。

这里是代码：fiddle

为什么这不起作用，我该如何解决？

【问题讨论】：

这就是你想要的吗？ jsfiddle.net/Kyle_Sevenoaks/2nPVZ/5如果是这样我会为你回答:)
是的或多或少。我希望第一行的所有元素都位于左侧，第二行位于左侧，一个在中间，一个在右侧。添加一个答案，你会得到标记:)
现在我注意到您添加了一些标签。如前所述，我不能这样做，因为 div 完全是从插件生成的。我无法控制 div 也无法添加和标签。
@Nicsoft 所以你希望所有元素都在同一行？如，选择右侧的框和左侧的所有其他元素？在同一条线下？还是两行？
不，两行。我确实更新了我的答案，我认为应该很清楚。

标签： jquery html css layout jquery-plugins

【解决方案1】：

我想这就是你要找的，在布局上很困惑：

CSS

.dataTables_length, .dataTables_length2, .dataTables_length3 {
    float:left;
}

.DTTT_container {
    float: left;
}

.ColVis {
    clear: right;
    text-align: left;
}

Demo.

【讨论】：

谢谢，非常接近。我想了解更多的是如何将元素定位在右侧、中间或左侧？例如，第一行的两个 div 都应该在左边。在第二行，我想要一个选择在左侧，一个在中间居中，一个在右侧。很抱歉我的问题有点不清楚。
@Nicsoft 你能画一个快速的模型吗？我仍然对布局感到困惑。
好起来（我希望）。我更新了你的演示。我设法移动了元素，因为我不会删除您的 .top div 部分并根据需要为每个元素放置浮动。现在这是我想要的，但有一个例外。在第二行，中间的选择应该与中心对齐，现在它与其他选择一起向左对齐。 http://jsfiddle.net/2nPVZ/13/
@Nicsoft 还有另一种方法，但它需要您为要居中的元素设置特定宽度。给定宽度后，您可以使用margin:0 auto 将其居中，这是最明智的方式，但还有其他方法，例如绝对定位（不推荐，因为它非常麻烦）或使用伪元素来创建一个假列（也不推荐，因为 IE 不太支持它）。
@Nicsoft 如果您的 .top 类下有其他元素受您的定位影响，只需在每个受影响的类上覆盖该规则并将它们对齐到您希望的位置，例如在元素上添加 text-align:right您希望在他们的班级上直接向右对齐。

【解决方案2】：

嗨，请检查此链接http://jsfiddle.net/2nPVZ/6/ 只需在您的 css 中添加小 css

.top div
{
    float:left;
}

【讨论】：

这会将除一个选择之外的所有元素放在第二行，将所有其他元素放在第一行。我想要第二行的所有选择元素和第一行的所有其余元素。我将更新我的问题以更清楚地说明这一点。
添加 clear:both; to .dataTables_length{} 将元素放在正确的行上。现在我只需要知道如何将元素定位在左右中间。

【解决方案3】：

考虑 css position - 2 和 box model 规则调整网页内容。使用容器宽度，然后使用定位容器的相对或绝对宽度，如果需要调整。

检查这个jsFiddle。

【讨论】：

感谢您提供的链接，我一定会检查出来的。您的示例将每个选择元素放在单独的行上。我想要第二行的所有选择元素和第一行的其余元素。更新我的答案以使这一点更清楚。
你还没有放任何js代码..到目前为止你尝试了什么？？
不，不使用js进行定位。我希望我不需要。

【解决方案4】：

尝试使用

display:block

而不是内联？

【讨论】：