J'étudie la mise en forme du CSS d'une entrée J'ai déjà trouvé un < un href = "http://www.w3.org/tr/css2/visuren.html#absolutely-positiond" rel = "noreferrer"> échantillon sur w3.org , qui utilise à gauche et à droite pour Créez une sorte de "cadamique" dans CSS. I Lisez également Article à partir d'une liste Apart parle de ce genre de technique et a trouvé plusieurs autres questions à traiter des problèmes similaires, mais aucun de ceux-ci ne concerne la question spécifique que je vais décrire. J'ai également constaté que je peux envelopper l'entrée interne voici Un échantillon de travail j'ai fait tester et clarifier l'idée.
En bref, il est aussi simple que ceci: avec un style comme celui-ci: Le point intéressant est sur les trois dernières lignes, lorsque je réglais la gauche et la droite et laissez la largeur comme "auto". Le résultat est que cela ne fonctionne que comme prévu à l'aide de Chrome (V.26), mais à la FF.20 ou IE.10 Il a l'air cassé: le La partie amusante est que cette approche avec des divs et des murs en ligne fonctionne comme prévu sur les trois navigateurs. est-ce un bogue sur le côté des navigateurs? Y a-t-il un moyen de le faire fonctionner sans la solution de contournement pour enfermer J'espère que quelqu'un a un indice à ce sujet. PS: Je me concentre sur des navigateurs HTML5 HTML5, cela ne vous dérange pas si cela ne fonctionnera pas sur IE8 ou plus. . .
J'aimerais qu'il "s'étirer" à l'intérieur de son conteneur (qui est également positionné "absolu") de sorte qu'il laisse par exemple 30px à gauche et à droite, et remplit tout l'espace à l'intérieur ... , mais je voudrais creuser un peu plus sur ce sujet pour comprendre pourquoi il est mauvaise conduite ...
positionné de la manière décrite?
2 commentaires
3 Réponses :
Ce n'est pas exactement ce que vous avez demandé, mais si vous vous souciez que de navigateurs modernes, vous pouvez utiliser Flexbox à la place.
Il vous suffit de préciser que vous utilisez Flexbox et que vous voulez une direction verticale, vous pouvez définir une marge de 30px, plutôt que d'utiliser le positionnement: Voir le Démo chez http://jsfiddle.net/ws9hf/8/
dans FF (dernière version officielle jusqu'à présent, V.20.0.1) Votre échantillon ne fonctionne pas comme prévu ( entrée sort de la barre verte) .. tout de toute façon c'est un autre chemin que j'aimerais étudier un peu plus =)
Je suis surpris par ce comportement. Le positionnement absolu absolu de haut à droite-bas-gauche fonctionne de façon merveilleusement (et a pour des années) mais il est ignoré par IE 10 et FF sur HERRING rouge: votre approche fonctionne fonctionne avec dans FF (PC / Mac) J'ai observé que la propriété de L'entrée semble remplacer tout sauf une affectation de largeur explicite. Par exemple, régler tout ce qui dit, j'ai une solution potentielle qui ne fait pas Il nécessite des modifications approfondies de votre code et fonctionne dans IE9 / 10, FF (PC / Mac), Chrome (PC / Mac) et Safari (Mac). Démo: http://jsfiddle.net/ws9hf/13/ Ceci utilise le CACL () fonction qui a Support de navigateur décent . Il convient de noter que cette fonctionnalité est considérée comme "à risque" par le W3, son avenir peut donc être incertain. comme "cool" comme la fonction entrées = "texte" Type d'entrée = "gamme" mais pas type d'entrée = "numéro" dans IE 10. Peut-être que ceci est associé à quelles entrées Le navigateur prend seule la responsabilité de dessiner, par rapport à ces entrées pouvant envelopper de manière finement une fonctionnalité déjà fournie par le système d'exploitation. taille = 4 rendra l'entrée plus étroite que souhaitée. La largeur observée semble être le résultat d'une taille implicite = 20 valeur de contournement
calc () est-étant Pragmatic - J'envelopperais probablement la ou les intrants incriminés dans un autre élément et être fait avec elle. Vous obtiendrez un support de navigateur plus large et une compatibilité future.
Je suis d'accord, le point est probablement ce que le navigateur fait pour rendre
Lorsque laissé & droit , puis en utilisant largeur: calc (100% - gaucheval - à droite) va développer le < Code> Entrée Élément comme régulier div
De loin la meilleure solution qui n'implique pas d'élément d'emballage, avec laquelle d'autres questions telles que le rembourrage et la frontière viennent (ex: essayez d'appliquer un rembourrage dans % - si elle est appliquée à Wrapper, alors ce ne sera pas être un rembourrage pour l'entrée . Si vous postulez à l'entrée, les valeurs % seront calculées en fonction de la largeur d'emballage qui n'est pas la prévue)
Vous pouvez envelopper l'entrée dans un récipient DIV et effectuer le style sur ce div.
Voici un exemple
Ce qui vient à l'esprit lorsque vous voulez qu'un élément se comporte comme un type d'anotter est peut-être le faire se comporter comme si un tel élément en lui donnant les mêmes propriétés, ce que je veux dire, ce que je veux dire, c'est ce que
affichage: bloquer Pour commencer et voir où cela vous prendJe l'ai déjà essayé et (bien sûr), ce n'était pas si facile, mais vous avez raison: ne jamais négliger des choses simples :)