顯示：內聯重置高度和寬度

我在http://jsfiddle.net/GKnkW/2/顯示：內聯重置高度和寬度

HTML創建例如

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
<body> 
     <div class="step">1</div>&nbsp; 
     <div class="step">2</div> 
     <br/><br/> 
     <div class="step1">3</div>&nbsp; 
     <div class="step1">4</div> 
</body> 
</html>

CSS

.step 
{ 
    height:150px; 
    width:150px;  
    background:yellow; 
    display:inline; 
} 

.step1 
{ 
    height:150px; 
    width:150px;  
    background:yellow; 
}

我想要與他們的原始高度，以顯示由側兩個div側和寬度（在CSS中設置）只要我添加顯示：內聯屬性爲CSS它似乎鬆動了先前定義的高度和寬度。 [檢查與＃1和＃2看起來寬鬆的高度和寬度設置似乎]

可以一些針指出一個錯誤，我似乎正在做或解決這個奇怪的行爲？

來源

2011-04-22 N30

內聯對象沒有高度或寬度。爲什麼你將它們設置爲內聯以開始？你可能想要浮動它們或使用內聯塊。

來源

2011-04-22 20:05:45

不知道嵌入對象的行爲。感謝啓蒙。將顯示屬性更改爲內聯塊可解決問題。 – N30 2011-04-22 20:09:47

dang！在11分鐘之前不能接受答案..將你的答案標記爲接受之後.. – N30 2011-04-22 20:10:51

這應該這樣做

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
    <body> 
     <div class="step-section"> 
      <div class="step">1</div> 
      <div class="step">2</div> 
     </div> 
     <div class="step-section"> 
      <div class="step">3</div> 
      <div class="step">4</div> 
     </div> 
</body> 
</html>

CSS

.step 
{ 
    margin:5px; 
    height:150px; 
    width:150px;  
    background: yellow; 
    float:left; 
} 

.step-section 
{ 
    clear:both; 
}

來源

2011-04-22 20:16:04 Racter

只是補充說，我有一個類似的問題，並認爲這是一個Javascript/jQuery的問題。這個線程解決了我。

INLINE元素沒有寬度，所以你不能通過js來設置它。

謝謝。

這是我的問題的鏈接，以防萬一。

Jquery and Jqueryui: set width not working after using resizable?

來源

2013-03-24 01:14:14 noderman

使用此：

display:inline-block;

來源

2015-12-20 21:24:42

請編輯你的答案並解釋其原因。 – 2015-12-20 21:53:14

inline-block保持內聯，但允許它採用塊元素屬性，如寬度和高度。 – 2017-08-16 03:18:14

顯示：內聯重置高度和寬度

回答

相關問題