HTML/CSS渲染問題

我有一個我遇到的問題的簡單示例。注意兩個div都有5個按鈕，每個按鈕的寬度應爲20％。第一組超越界限，我不知道爲什麼。如果你使用開發工具，你可以看到div本身是100％寬度的正確大小。在第二組中，當按鈕被連接起來時，它可以工作。任何人都可以解釋嗎？HTML/CSS渲染問題

jsfiddle Demo

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     .nav5 { 
      white-space: nowrap; 
     } 
     .nav5 button { 
      height: 50px; 
      width: 20%; 
     } 
    </style> 
</head> 
<body> 
    <div class="nav5"> 
     <button>A</button> 
     <button>B</button> 
     <button>C</button> 
     <button>D</button> 
     <button>E</button> 
    </div> 
    <div class="nav5"> 
     <button>A</button><button>B</button><button>C</button><button>D</button><button>E</button> 
    </div> 
</body> 
</html>

來源

2013-02-20 emsieja

對於這樣你會使用的jsfiddle展現你的代碼中受益的問題。 – 2013-02-20 13:47:44

或者你可以「浮動：左」你的按鈕

http://jsfiddle.net/AdeMU/1/

.nav5 { 
     white-space: nowrap; 
    } 
    .nav5 button { 
     height: 50px; 
     width: 20%; 
     margin:0; 
     float:left; 
    }

來源

2013-02-20 14:13:27

即使您指定white-space: nowrap;它縮短了所有的空格爲一體，所以它不會完全刪除它。您可以使用您指定的第二種方法，或註釋掉兩者之間的空間。

來源

2013-02-20 13:55:05

HTML/CSS渲染問題

回答

相關問題