如何让两个div在同一行上保持位置？

Question

我一直在做一个类似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中却不行，所以我不确定它们是在弥补愚蠢还是其他什么。理想情况下，第二张图片应该贪婪地向右浮动在包含块中。在有问题的浏览器中，它会在下一行（至少在最右边）显示。

- Riet

---

这个主题可能会对你有所帮助：) https://dev59.com/onI-5IYBdhLWcg3wN1hD - user1196567

你可以使用自然是内联的span，而不是自然是块级的div。 - Heretic Monkey

感谢您的输入。我已经尝试使用span和clear:both，但是clear需要在特定类型的元素上使用吗？ - Riet

这段代码适用于Opera和Internet Explorer：<li><a href="#"><span class="imgDivLt"></span><span class="imgDivRt"></span>Sub 1</a></li>由于在图像之间放置文本会导致IE和Opera出现问题。 - Riet

Answer 1

您可以使用这种方式使两个div并排显示：

display:inline;
float:left;

- J D

---

可以让两个元素都向左浮动，没有规定不能这样做。它们只是会向左侧堆叠。此外，需要注意的是，您不需要同时使用display:inline和float属性。 - MetalFrog

我应该把它放在代码的哪个位置？它已经被用在我的两个div上了，而当我把它放在包含块上时，它并没有按预期工作。 - Riet

@Riet，在IE11中，我必须将这个代码添加到每个我想要在同一行的DIV中。即使是添加到外层DIV（即我想要在同一行的DIV周围的DIV）也不起作用。（我知道这是一个老问题，但如果在2012年回答了Riet的答案，它会为我节省一些麻烦）。 - Michael Gorsich

Answer 2

对我而言，这种方法效果更好，因为它不会删除漂浮项之间的间距：

display:inline-block;

如果对其他人有帮助的话。

- Maxim Lott

Answer 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>

- Ronnie Royston

Answer 4

请将此内容添加到容器div中。

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

- Wolfack

Answer 5

如果您想在一个连续的区块中创建多个div，则只需将以下代码添加到您的CSS文件中，每个div、div类等都要加上。

display: inline-block;

- Manish Chand Rajwar

Answer 6

这个方法对于像Shopify、Weebly这样的网站构建工具来说，也非常适用于将两个div调整到同一行。在这些工具中，你很难轻松地调整CSS文件。我只是想为其他正在寻找网站构建解决方案的人提供这个特定的答案。

display:inline;
float:left;

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

- iLoveMechKeyboards