如何保持在同一条线上两个div？(How do I keep two divs on the sam

我一直在努力类似口鱼下拉菜单上。 我有下拉侧现在的工作，但我有一些图片，我试图把上的链接的两侧。 现在，我使用div的，图像的大小，然后设置background-image属性，我需要（以便它可以使用伪变化：悬停类）的图像。

这里要说的是应用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);
}    

我用的是选择一个小节省具有不同的类，但IE浏览器似乎并不支持它们:(

这是我的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>

我不知道是否有在我的代码一个小故障，或者如果我在错误的轨道上。 它工作在火狐，Safari和Chrome，但不是IE或歌剧，所以我不知道他们是否弥补了愚蠢还是什么。 理想的情况下，第二图像贪婪地漂浮在包含块的权利。 在这个问题的浏览器，它坐落在下一行（最右侧至少）

Answer 1:

你可以让两个div内联是这样的：

display:inline;
float:left;

Answer 2:

对我来说，这个工作要好得多，因为它并没有消除浮动元素之间的间距：

display:inline-block;

在情况下，可以帮助别人。

Answer 3:

简单做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> 

文章来源: How do I keep two divs on the same line?