Lề, vị trí và phần đệm không hoạt động khi hiển thị: dòng được đặt. cũng hành vi kỳ lạ từ vị trí tương đối

Question

Tôi có hai lớp 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; 
} 

Bây giờ, như bạn có thể thấy, họ là cả hai thiết lập để hiển thị trong một dòng (không ngắt dòng ở giữa các yếu tố). Mà hoạt động chính xác. Nhưng vì một lý do nào đó, kể từ khi tôi đặt màn hình thành inline, Padding, Positioning và Margin CSS đều đã ngừng hoạt động. Tôi có thể thêm 10 inch lề trái và không có gì xảy ra. Cùng với đệm và định vị.

Có ai có thể giải thích cách sửa lỗi này không?

Ngoài ra, tôi có vị trí tương đối được đặt trên cả hai lớp, nhưng khi xem trang trong trình duyệt, .class2 qua vòng .class1 khi được cho là chỉ sau .class1.

Bất kỳ ý tưởng nào?

EDIT:

Được rồi, vì vậy tôi đã thực hiện một JSFiddle, nhưng nó dường như được chơi lên thậm chí nhiều hơn có ....

Hình như Width không hoạt động ... .

ở đây là:

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

Answer 1

Bạn cần phải sử dụng

display: inline-block; 

thay thế. margin không hoạt động với các yếu tố display: inline, tuy nhiên với inline-block thì có. Sau đó, bạn có thể có một phần tử nội tuyến có lề và chiều rộng/chiều cao rõ ràng.

Để làm công việc này trong IE7, thêm hai dòng sau:

*display: inline; 
zoom: 1; 

Thật kinh khủng, nhưng nó hoạt động.

Answer 2

Tôi biết điều này là một câu trả lời khá muộn nhưng tôi đã viết một plugin jQuery có hỗ trợ đệm trên các yếu tố nội tuyến (với từ bẻ) thấy JSfiddle này:

http://jsfiddle.net/RxKek/

Plugin Mã số:

$.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

Thats vấn đề bạn nhận được khi sử dụng mẫu, ive lập trình một trang web trong php, nhưng thiết kế đang giết chết tôi. Vì vậy, tôi đã thử một số nhiên liệu tên lửa cho các nhà thiết kế web.

Và đây là vấn đề tôi tiếp tục từng bước ... khối nội tuyến không hoạt động cho tôi, không có gì hoạt động, bởi vì nó không phải là thiết kế của tôi và tôi không biết thiết lập.

Ive tryd tự thiết kế, nhưng tôi hết thời gian, tôi cần thiết kế ngày hôm qua.

Tôi đề nghị bạn lấy những gì bạn cần từ các mẫu và xóa mọi thứ khác, điều đó sẽ giải thích vấn đề của bạn và tiết kiệm thời gian cho bạn.