Si je défini est-il nécessaire d'utiliser Affichage: Inline Code> Pour n'importe quel élément, alors
Margin code>,
Padding code>,
Largeur code>,
> Hauteur code> pas affecter sur cet élément? P>
float: gauche code> ou
Affichage: bloquer code> ou
affichage: inline-block code> pour utiliser
marge Code>,
rembourrage code>,
largeur code>,
hauteur code> sur cet élément? P>
3 Réponses :
Le rembourrage fonctionnera pour EDIT: corrigé p> en ligne code>. La hauteur et la largeur ne seront toutefois pas. P>
S'il vous plaît voir " Formatage en ligne contextes " au CSS spécifications pour l'explication complète. P>
Fondamentalement La marge, le rembourrage et la bordure peuvent être définies sur des éléments de niveau en ligne, mais ils ne peuvent pas se comporter comme vous vous attendez. Le comportement sera probablement ok s'il n'y a qu'une seule ligne, mais d'autres lignes du même flux présenteront probablement un comportement différent de vos attentes (c'est-à-dire le rembourrage ne sera pas respecté). De plus, votre boîte inline peut être cassée s'il contient des éléments cassables et atteint la marge de l'élément contenant; Dans ce cas, au point de pause, les marges et le rembourrage ne seront pas également respectés. P>
a trouvé un bel exemple de celui avec des listes: http://www.maxdesign.com. AU / Articles / Inline / P>
Je sais que c'est une réponse assez tardive, mais j'ai écrit un plug-in jQuery qui prennent en charge le rembourrage sur des éléments en ligne (avec une rupture de mots) Voir ce jsfiddle:
Code du plug-in: p>
$.fn.outerHTML = function () { // IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning return (!this.length) ? this : (this[0].outerHTML || ( function (el) { var div = document.createElement('div'); div.appendChild(el.cloneNode(true)); var contents = div.innerHTML; div = null; return contents; })(this[0])); }; /* Requirements: 1. The container must NOT have a width! 2. The element needs to be formatted like this: <div>text</div> in stead of this: <div> text </div> */ $.fn.fixInlineText = function (opt) { return this.each(function () { //First get the container width var maxWidth = opt.width; //Then get the width of the inline element //To calculate the correct width the element needs to //be 100% visible that's why we make it absolute first. //We also do this to the container. $(this).css("position", "absolute"); $(this).parent().css("position", "absolute").css("width", "200%"); var width = $(this).width(); $(this).css("position", ""); $(this).parent().css("position", "").css("width", ""); //Don't do anything if it fits if (width < maxWidth) { return; } //Check how many times the container fits within the box var times = Math.ceil(width / maxWidth); //Function for cleaning chunks var cleanChunk = function (chunk) { var thisChunkLength = chunk.length - 1; if (chunk[0] == " ") chunk = chunk.substring(1); if (chunk[thisChunkLength] == " ") chunk = chunk.substring(0, thisChunkLength); return chunk; }; //Divide the text into chunks var text = $(this).html(); var textArr = text.split(" "); var chunkLength = Math.ceil((textArr.length - 1) / times); var chunks = []; var curChunk = ""; var curChunkCount = 0; var isParsingHtml = false; //Loop through the text array and split it into chunks for (var i in textArr) { //When we are parsing HTML we don't want to count the //spaces since the user doesn't see it. if (isParsingHtml) { //Check for a HTML end tag if (/<\/[a-zA-Z]*>/.test(textArr[i]) || /[a-zA-Z]*>/.test(textArr[i])) { isParsingHtml = false; } } else { //Check for a HTML begin tag if (/<[a-zA-Z]*/.test(textArr[i])) { isParsingHtml = true; } } //Calculate chunks if (curChunkCount == (chunkLength - 1) && !isParsingHtml) { curChunk += textArr[i] + " "; chunks.push(cleanChunk(curChunk)); curChunk = ""; curChunkCount = -1; } else if ((i == (textArr.length - 1))) { curChunk += textArr[i]; chunks.push(cleanChunk(curChunk)); break; } else { curChunk += textArr[i] + " "; } if (!isParsingHtml) { curChunkCount++; } } //Convert chunks to new elements var el = $($(this).html("").outerHTML()); for (var x in chunks) { var new_el = el.clone().html(chunks[x]).addClass("text-render-el"); var new_el_container = $("<div/>").addClass("text-render-container"); new_el_container.append(new_el); $(this).before(new_el_container); } //Finally remove the current element $(this).remove(); }); };
Rembourrage Code> fonctionnera également pour les éléments en ligne.