El margen, la posición y el relleno no funcionan cuando se visualiza la pantalla: en línea. También extraño comportamiento de la posición relativa

Question

tengo dos clases 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; 
} 

Ahora, como se puede ver, los dos son conjunto para mostrar en una línea (sin saltos de línea entre los elementos). Que funciona correctamente Pero por alguna razón, desde que configuré la pantalla en línea, el acolchado, el posicionamiento y el margen de CSS han dejado de funcionar. Puedo agregar un margen: 10 pulgadas a la izquierda y no pasará nada. Lo mismo con relleno y posicionamiento.

¿Alguien puede explicar cómo solucionar esto?

Además, tengo la posición relativa nominal en ambas clases, sin embargo, cuando se ve la página en un navegador, .class2 más vueltas .class1 cuando se supone que es justo después de .class1.

¿Alguna idea?

EDITAR:

bien, así que he hecho un jsFiddle, pero parece estar jugando aún más allí ....

Parece que el Width no funciona ... .

aquí está:

http://jsfiddle.net/zYbwh/1/

Answer 1

es necesario utilizar

display: inline-block; 

en su lugar. margin no funciona con display: inline elementos, sin embargo con inline-block lo hace. Luego puede tener un elemento en línea con márgenes y anchos/alturas explícitos.

para hacer este trabajo en IE7, añadir estas dos líneas:

*display: inline; 
zoom: 1; 

Es horrible, pero funciona.

Answer 2

Sé que esto es una respuesta bastante tarde pero escribí un plugin de jQuery que apoyan el relleno de los elementos en línea (con separación de palabras) ver este jsFiddle: Código

http://jsfiddle.net/RxKek/

Plugin:

$.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(); 
}); 

};

Answer 3

Ese es el problema que tienes al usar plantillas, he programado un sitio en php, pero el diseño me está matando. Así que probé un poco de combustible para cohetes para diseñadores web.

Y estos son los problemas que sigo recibiendo en cada paso del camino ... El bloque en línea no funciona para mí, nada funciona, porque no es mi diseño y no conozco la configuración.

Ive tryd haciendo el diseño yo mismo, pero estoy fuera de tiempo, necesito un diseño ayer.

Le sugiero que tome lo que necesite de las plantillas y elimine todo lo demás, que solucionará su problema y le ahorrará tiempo.