如何将两个 div 保持在同一行？

Posted 2023-02-25

【中文标题】如何将两个 div 保持在同一行？

【英文标题】：How do I keep two divs on the same line?

【发布时间】：2012-05-19 09:44:42

【问题描述】：

我一直在研究类似于 Suckerfish 的下拉菜单。我现在已经让下拉菜单工作了，但我有一些图像我正试图放在链接的任一侧。现在我正在使用图像大小的 div，然后将 background-image 属性设置为我需要的图像（以便它可以使用伪 :hover 类进行更改）。

这是适用的 CSS：

ul#menu3 li 
    color: #000000;
    float: left;
    /*I've done a little playing around here, doesn't seem to do anything*/
    position: relative;
    /*margin-bottom:-1px;*/

    line-height: 31px;
    width: 10em;
    padding: none;
    font-weight: bold;
    display: block;
    vertical-align: middle;
    background-image: url(../../images/dropdown/button-tile.gif);

.imgDivRt 
    width: 20px;
    height: 31px;
    display: inline;
    float: right;
    vertical-align: middle;
    background-image: url(../../images/dropdown/button-right.gif);

.imgDivLt 
    width: 20px;
    height: 31px;
    display: inline;
    float: left;
    vertical-align: middle;
    background-image: url(../../images/dropdown/button-left.gif);
    

我使用选择器来节省一些使用不同类的费用，但 Internet Explorer 似乎不支持它们:(

这是我适用的 html：

<li><div class="imgDivLt"></div>Option 1<div class="imgDivRt"></div>
<ul>
    <li><a href="#"><div class="imgDivLt"></div>Sub 1<div class="imgDivRt"></div></a>
        <ul>
            <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
        </ul>
    </li>
    <li><a href="#"><div class="imgDivLt"></div>Sub 2<div class="imgDivRt"></div></a> 
    <ul>
            <li><a href="#"><div class="imgDivLt"></div>Sub 1<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sub 2<div class="imgDivRt"></div></a> </li>
            <li><a href="#"><div class="imgDivLt"></div>Sub 3<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sub 4<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sub 5<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sub 6<div class="imgDivRt"></div></a></li>
        </ul>
    </li>
    <li><a href="#"><div class="imgDivLt"></div>Sub 3<div class="imgDivRt"></div></a></li>
    <li><a href="#"><div class="imgDivLt"></div>Sub 4<div class="imgDivRt"></div></a></li>
    <li><a href="#"><div class="imgDivLt"></div>Sub 5<div class="imgDivRt"></div></a></li>
    <li><a href="#"><div class="imgDivLt"></div>Sub 6<div class="imgDivRt"></div></a></li>
</ul>
</li>
<li><div class="imgDivLt"></div>Option 2<div class="imgDivRt"></div>

我不确定我的代码是否有问题，或者我是否走错了路。它适用于 firefox、safari 和 chrome，但不适用于 IE 或 Opera，所以我不确定它们是在弥补愚蠢还是什么。理想情况下，第二个图像在包含块中贪婪地向右浮动。在有问题的浏览器中，它位于下一行（至少在最右边）

【问题讨论】：

这个话题可能对你有帮助:) ***.com/questions/1964297/…

你可以使用span，自然是inline，而不是div，自然是block。

感谢您的意见。我试过使用span 和clear:both，clear 是否需要用于特定类型的元素？

这段代码适用于 Opera 和 Internet Explorer：<li><a href="#"><span class="imgDivLt"></span><span class="imgDivRt"></span>Sub 1</a></li> 出于某种原因，在图像之间放置文字让 IE 和 Opera 吓坏了。

【参考方案1】：

您可以通过这种方式使两个 div 内联：

display:inline;
float:left;

【讨论】：

那么两者都可以向左浮动，没有规定为什么不能。他们只会向左塌陷。此外，需要注意的是，您不需要显示内联 和 浮动。

我应该把这个放在我的代码中的什么位置？它已经在我的两个 div 上使用了，当我将它放在包含块上时，它没有按预期工作。

@Riet，在 IE11 中，我必须将它添加到我想要在同一行上的每个 DIV 中。甚至将它添加到下一个外部 DIV（即，在我想要在同一行上的 DIV 周围）都不起作用。 （我意识到这是一个老问题，但如果在 2012 年得到回答，Riet 的答案会为我省去一些麻烦）。

【参考方案2】：

对我来说，这效果更好，因为它没有消除浮动项目之间的间距：

display:inline-block;

以防万一对其他人有帮助。

【参考方案3】：

简单地在div 上执行display: inline-block，但一定要同时设置min-width 和max-width。示例如下：

div 
  max-width: 200px;
  min-width:200px;
  background:grey;
  display:inline-block;
  vertical-align: top;

<div>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
</div>

<div>
  <p>test 2</p>
  <p>test 2</p>
  <p>test 2</p>
</div>

【参考方案4】：

如果你想在单个延续中创建多个 div，那么只需将下面的代码行添加到你的 css 文件中，每个 div、div 类等。

display: inline-block;

【参考方案5】：

将此添加到容器 div

.container_class 
    display: flex;
    justify-content: center;

【参考方案6】：

这种方法也适用于将两个 div 调整到同一行，适用于 shopify、weebly 等网站建设者，在这些网站建设者中，您无法很容易地调整 CSS 文件。只是想将这个特定的答案也提供给其他搜索网站构建器解决方案的人。

display:inline;
float:left;

所有功劳归于最初发现上述解决方案的 J D。