web-dev-qa-db-fra.com

Comment garder deux divs sur la même ligne?

Je travaille sur un menu déroulant similaire à suckerfish. Je travaille maintenant dans la liste déroulante, mais j’essaie de placer des images de chaque côté des liens. En ce moment, j'utilise div la taille de l'image, puis j'affecte la propriété background-image à l'image dont j'ai besoin (afin qu'elle puisse être modifiée à l'aide de la classe pseudo: hover).

Voici le CSS qui s'applique:

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);
}

J'utilisais des sélecteurs pour économiser un peu sur le fait d'avoir différentes classes, mais Internet Explorer ne semble pas les prendre en charge :( 

Voici mon HTML qui s'applique:

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

Je ne sais pas s'il y a un problème dans mon code ou si je suis sur la mauvaise piste. Cela fonctionne dans Firefox, Safari et Chrome, mais pas IE ni à l'opéra, je ne suis donc pas sûr qu'ils compensent la stupidité ou quoi. Idéalement, la deuxième image flotte dans le bloc contenant vers la droite. Dans les navigateurs à problèmes, la ligne suivante est positionnée vers le bas (au moins à l'extrême droite)

cssinternet-exploreroperacss-float
21
Riet

Vous pouvez faire deux divs en ligne de cette façon:

display:inline;
float:left;
43
J D

Pour moi, cela fonctionnait beaucoup mieux car cela n'éliminait pas l'espacement entre les éléments flottants:

display:inline-block;

Au cas où cela aiderait quelqu'un d'autre.

5
Maxim Lott

Simple do display: inline-block sur les deux div's mais soyez sûr et définissez min-width et max-width tous les deux Exemple ci-dessous:

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>

1
Ron Royston