如何保持两个div在同一行？ [英] How do I keep two divs on the same line?

问题描述

我一直在使用类似于suckerfish的下拉菜单。我现在有下拉边工作，但我有一些图像我想放在链接的任一方。现在我使用div的图像大小，然后设置 background-image 属性到我需要的图像（以便它可以改变使用pseudo：hover类）。

I've been working on a dropdown menu similar to suckerfish. I've got the dropdown side working now, but I have some images I'm trying to put on either side of the links. Right now I'm using a div the size of the image, then setting the background-image property to the image I need (so that it can change using the pseudo :hover class).

以下是适用的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似乎不支持他们:(

I was using selectors to save a little on having different classes, but internet explorer doesn't seem to support them :(

这是我的HTML适用：

Here is my HTML that applies:

<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或歌剧，所以我不知道如果他们弥补愚蠢或什么。理想情况下，第二个图像在包含块中向右漂浮。

I'm not sure if there's a glitch in my code, or if I'm on the wrong track. It works in firefox, safari, and chrome, but not IE or opera, so I'm not sure if they're making up for stupidity or what. Ideally, the second image floats greedily to the right in the containing block. In the problem browsers, it sits the next line down (at the far right at least)

推荐答案

你可以使两个div在线这样：

You can make two divs inline this way:

display:inline;
float:left;

这篇关于如何保持两个div在同一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！