Comment puis-je garder les deux divs sur la même ligne?
J'ai travaillé sur un menu déroulant similaire à suckerfish. J'ai le menu déroulant à côté de travail maintenant, mais j'ai quelques images que je suis en train de mettre sur chaque côté de la liens. Actuellement, j'utilise un div de la taille de l'image, puis en définissant la background-image bien à l'image que j'ai besoin (de sorte qu'il peut modifier à l'aide du pseudo :hover classe).
Ici est 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'ai été en utilisant les sélecteurs pour économiser un peu sur les différentes classes, mais internet explorer ne semble pas à les soutenir 🙁
Voici mon code 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 si il y a un bug dans mon code, ou si je suis sur la mauvaise voie. Il fonctionne dans firefox, safari et chrome, mais pas IE ou opera, donc je ne suis pas sûr si elles font de la place pour de la stupidité ou quoi. Idéalement, la deuxième image flotteurs avidement vers la droite dans le bloc contenant. Dans le problème de navigateurs, il se trouve la ligne suivante vers le bas (à l'extrême droite au moins)
Vous pouvez utiliser un
span qui est naturellement inline, plutôt que d'un div qui est naturellement block.Merci pour l'entrée. J'ai essayé d'utiliser
span et clear:both, ne clear besoin d'être utilisé sur un type spécifique d'élément?Ce code fonctionne sur opera et internet explorer:
<li><a href="#"><span class="imgDivLt"></span><span class="imgDivRt"></span>Sub 1</a></li> pour une raison de mettre le texte entre les images IE et Opera freak out.OriginalL'auteur Riet | 2012-05-10
Vous devez vous connecter pour publier un commentaire.
Vous pouvez faire deux divs inline de cette façon:
Où exactement dans mon code dois-je mettre? Il est déjà utilisé sur mes deux divs, et quand je l'ai mis sur le bloc contenant, il ne fonctionne pas comme prévu.
dans IE11, j'ai dû ajouter ceci à chaque DIV que je voulais sur la même ligne. Ajoutant à même la prochaine DIV extérieure (c'est à dire, autour de la DIV est que je voulais sur la même ligne) ne fonctionne pas. (Je réalise que c'est une vieille question, mais la réponse à Riet m'aurait évité quelques déconner, s'il avait été répondu en 2012).
OriginalL'auteur J D
Pour moi, cela a fonctionné beaucoup mieux, car il n'a pas d'éliminer l'espacement entre les flottait éléments:
Dans l'affaire qui l'aide à quelqu'un d'autre.
OriginalL'auteur Maxim Lott