Comment puis-je garder deux divs sur la même ligne?
, j'ai travaillé sur un menu déroulant similaire à suckerfish. J'ai le côté déroulant qui fonctionne maintenant, mais j'ai quelques images que j'essaie de mettre de chaque côté des liens. En ce moment, j'utilise un div la taille de l'image, puis en définissant la propriété background-image à l'image dont j'ai besoin (afin qu'elle puisse changer en utilisant 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 les classes différentes, mais internet explorer ne semble pas pour les soutenir :(
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 suis pas sûr s'il y a un problème dans mon code, ou si je suis sur la mauvaise voie. Cela fonctionne dans firefox, safari et chrome, mais pas IE ou opera, donc je ne suis pas sûr s'ils compensent la stupidité ou quoi. Idéalement, la deuxième image flotte avidement vers la droite dans le bloc contenant. Dans les navigateurs à problèmes, il se trouve la ligne suivante vers le bas (à l'extrême droite au moins)
3 réponses
Vous pouvez faire deux divs en ligne de cette façon:
display:inline;
float:left;
Pour moi, cela a beaucoup mieux fonctionné, car cela n'a pas éliminé l'espacement entre les éléments flottants:
display:inline-block;
Au cas où cela aiderait quelqu'un d'autre.
Simple faites display: inline-block sur les deux div mais assurez-vous et définissez min-width et max-width 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>