9
votes

La marge, la position et le rembourrage ne fonctionnent pas lorsque l'affichage: Inline est définie. Comportement étrange de la position relative

J'ai deux classes CSS: xxx

MAINTENANT, comme vous pouvez le constater, ils sont à la fois définis pour afficher dans une ligne (aucune ligne ne se casse entre des éléments). Qui fonctionne correctement. Mais pour une raison quelconque, depuis que je définissais l'affichage en ligne, le rembourrage, le positionnement et la marge CSS ont tout simplement arrêté de fonctionner. Je peux ajouter une marge-gauche 10 pouces et rien ne se passera. Même avec rembourrage et positionnement.

Quelqu'un peut-il expliquer comment résoudre ce problème?

En outre, j'ai la position relative définie sur les deux classes, mais lors de la visualisation de la page dans un navigateur, < Code> .Class2 sur des tours .class1 quand c'est supposé être juste après .class1 .

econaille?

EDIT :

D'accord, alors j'ai fait un jsfiddle, mais cela semble jouer encore plus là ...

On dirait que la largeur ne fonctionne pas ....

ici c'est:

http://jsfiddle.net/zybw/1/


0 commentaires

3 Réponses :


12
votes

Vous devez utiliser

*display: inline;
zoom: 1;


4 commentaires

J'ai essayé en ligne-block. Les éléments ne se présentent pas dans une ligne du tout. C'est juste un en dessous de l'autre ...


Pouvez-vous poster un cas de test simple dans un Jsfiddle ? En outre, en utilisant l'inspecteur Firebug ou Chrome pour voir quels styles sont appliqués à l'élément aideront beaucoup.


Dans IE, si vous commencez avec un élément en ligne, vous n'avez pas besoin de l'horriblement. Donc, chaque fois que vous avez besoin d'un inline-block , utilisez simplement un span au lieu d'un div , devrait être bien. (J'ai déjà passé 2 heures sur cette stupidité>.


Dans le violon, vous utilisez toujours en ligne , que vous avez été dit ne fonctionne pas. Si vous passez à inline-block , c'est un sous un autre parce que le conteneur est de largeur insuffisante. Si vous résolvez cela, cela fonctionne sur Chrome; Il ne va toujours pas sur IE, en raison de l'IE Bug décrit ci-dessus (uniquement à l'origine inline peut devenir inline-block , de sorte que vous devez le tromper à devenir Inline temporairement sous forme de @jamwaffles décrit ou utilisez des éléments par défaut sur en ligne , comme span ).



0
votes

Je sais que c'est une réponse tardif, mais j'ai écrit un plugin JQuery qui supporte le rembourrage sur des éléments en ligne (avec une rupture de mots) Voir ce jsfiddle:

http://jsfiddle.net/rxkek/

Code du plug-in: xxx

}; xxx

};


0 commentaires

0
votes

C'est le problème que vous obtenez lorsque vous utilisez des modèles, ive programmé un site en PHP, mais la conception me tue. Donc, j'essaye du carburant de fusée pour les webDesigners.

Et c'est les problèmes que je continue à obtenir chaque étape du chemin ... Inline-Block ne fonctionne pas pour moi, rien ne fonctionne, car ce n'est pas mon design et je ne connais pas la configuration.

ive tryd faire la conception moi-même, mais je suis hors de temps, j'ai besoin d'une conception hier.

Je vous suggère de prendre ce dont vous avez besoin des modèles et de supprimer tout le reste, qui schrira votre problème et vous fera gagner du temps.


0 commentaires