Marge, la position et le remplissage ne fonctionne pas lorsque le display:inline est réglé. aussi bizarre le comportement de la position relative
J'ai deux classes CSS:
.class1 {
height: 100%;
width: 300px;
border: 1px none #B0B0B0;
position: relative;
display: inline;
left: 10px;
}
.class2 {
height: 100%;
width: 200px;
position: relative;
display: inline;
margin-left: 15px;
background-color: #00CCCC;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
Maintenant, comme vous pouvez le voir, ils sont tous les deux définis à l'affichage en ligne (pas de sauts de ligne entre les éléments). Ce qui fonctionne correctement. Mais pour une raison quelconque, depuis que j'ai régler l'affichage en ligne, le Remplissage, le Positionnement et la Marge CSS ont tout simplement cessé de fonctionner. Je peux ajouter une marge à gauche 10inches et rien ne se passera. Même avec un rembourrage et de positionnement.
Quelqu'un peut-il expliquer comment résoudre ce problème?
Aussi, j'ai la position relative sur les classes, mais lors de l'affichage de la page dans un navigateur, .class2
plus de tours .class1
lors de son censé être juste après .class1
.
Des idées?
MODIFIER:
Ok, donc j'ai fait un JSFiddle, mais il semble être en train de jouer encore plus....
Ressemble à la Width
ne fonctionne pas....
ici, il est:
OriginalL'auteur | 2012-01-09
Vous devez vous connecter pour publier un commentaire.
Vous devez utiliser
à la place.
margin
ne fonctionne pas avecdisplay: inline
éléments, cependant, avecinline-block
il n'. Vous pouvez ensuite avoir un élément inline avec des marges et explicite largeurs/hauteurs de.Pour faire ce travail dans IE7, ajoutez ces deux lignes:
C'est horrible, mais il fonctionne.
Pouvez-vous poster un simple cas de test dans un JSFiddle? Aussi, à l'aide de Firebug ou Chrome inspecteur pour voir ce que les styles sont effectivement appliqué à l'élément sera d'une grande aide.
En d'autres termes, si vous commencez avec un élément inline, vous ne devriez pas besoin de la horribleness. Ainsi, si vous avez besoin d'un
inline-block
, il suffit d'utiliser unspan
au lieu d'undiv
, devrait être bon. (Une fois, j'ai passé 2 heures au cours de cette stupidité >.< sacrément IE)fait un JSFiddle, vérifier mon montage. Merci pour votre aide.
En coulisse, vous êtes toujours à l'aide de
inline
, qui vous ai dit de ne pas travailler. Si vous passez àinline-block
, c'est l'un sous l'autre, car le conteneur est de l'insuffisance de la largeur. Si vous remédier à cela, il fonctionne sur google Chrome; il ne veut toujours pas sur IE, en raison de IE bug décrit ci-dessus (uniquement à l'origineinline
éléments peuvent devenirinline-block
, donc vous devez les inciter à devenirinline
temporairement @JamWaffles décrit, ou utiliser des éléments que le défaut deinline
, commespan
).OriginalL'auteur Bojangles
Je sais que c'est tout à fait une réponse tardive mais j'ai écrit un plugin jQuery qui soutiennent rembourrage sur les éléments en ligne (avec la césure de mots), ce JSfiddle:
http://jsfiddle.net/RxKek/
Code Du Module:
};
};
OriginalL'auteur Dillen Meijboom
C'est le problème que vous obtenez lors de l'utilisation de modèles, j'ai programmé un site en php, mais le design est en train de me tuer.
J'ai donc essayer avais quelques carburant de fusée pour les webdesigners.
Et c'est les problèmes que je reçois à chaque étape du chemin...
Inline-block ne fonctionne pas pour moi, rien ne fonctionne, parce que ce n'est pas mon design et je ne sais pas le programme d'installation.
Ive tryd faire la conception de moi-même, mais je suis hors du temps, j'ai besoin d'un design d'hier.
Je vous suggère de prendre ce que u besoin de modèles et de supprimer tout le reste, qui va schrink votre problème, et vous faire gagner du temps.
OriginalL'auteur Peter Gruppelaar