如何將兩個 div 保持在同一行上？

Question

我一直在研究類似於吸盤魚的下拉菜單。 我的下拉菜單現在可以工作了，但是我有一些圖片我想放在鏈接的任一側。 現在我正在使用圖像大小的 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 或歌劇，所以我不確定它們是在彌補愚蠢還是什么。 理想情況下，第二個圖像在包含塊中貪婪地向右浮動。 在有問題的瀏覽器中，它位於下一行（至少在最右邊）

Answer 1

您可以通過這種方式內聯兩個 div：

display:inline;
float:left;

Answer 2

對我來說，這效果更好，因為它沒有消除浮動項目之間的間距：

display:inline-block;

萬一這有助於其他人。

Answer 3

Simple do display: inline-block在兩個div ，但一定要同時設置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>

Answer 4

如果您想在一個延續中創建多個 div，那么只需將以下代碼行添加到您的 css 文件中，每個 div、div 類等。

display: inline-block;

Answer 5

這種方法也適用於將兩個 div 調整為同一行的網站建設者，如 shopify、weebly，在這些網站上您不能很容易地調整 CSS 文件。 只是想為其他搜索網站構建器解決方案的人提供這個特定的答案。

display:inline;
float:left;

所有的功勞都歸功於最初發現上述解決方案的 JD。

Answer 6

將此添加到容器div

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