太多空間（浮動div）

Question

我是浮動divs，現在有一些差距。這是我的代碼：

<style> 
ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

ul li { 
    display: block; 
    float: left; 
    border: 1px solid red; 
    width: 80px; 

} 
</style> 

<ul> 

     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
     <li>Item 6</li> 
     <li>Item 7</li> 
     <li>Item 8</li> 
     <li>Item 9</li> 
     <li>Item 10</li> 
     <li>Item 11</li> 
     <li>Item 12</li> 
     <li>Item 13</li> 
     <li>Item 14</li> 
     <li>Item 15</li> 
     <li>Item 16</li> 
     <li>Item 17</li> 
     <li>Item 18</li> 
     <li>Item 19</li> 
     <li>Item 20</li> 
     <li>Item 21</li> 
     <li>Item 22</li> 
     <li>Item 23</li> 
     <li>Item 24</li> 
     <li>Item 25</li> 
     <li>Item 26</li> 
     <li>Item 27</li> 
     <li>Item 28</li> 
     <li>Item 29</li> 
     <li>Item 30</li> 
     <li>Item 31</li> 
     <li>Item 32</li> 
     <li>Item 33</li> 
     <li>Item 34</li> 
     <li>Item 35</li> 
     <li>Item 36</li> 
     <li>Item 37</li> 
     <li>Item 38</li> 
     <li>Item 39</li> 
     <li>Item 40</li> 
     <li>Item 41</li> 
     <li>Item 42</li> 
     <li>Item 43</li> 
     <li>Item 44</li> 
     <li>Item 45</li> 
     <li>Item 46</li> 
     <li>Item 47</li> 
     <li>Item 48</li> 
     <li>Item 49</li> 
     <li>Item 50</li> 
     <li>Item 51</li> 
     <li>Item 52</li> 
     <li>Item 53</li> 
     <li>Item 54</li> 
     <li>Item 55</li> 
     <li>Item 56</li> 
     <li>Item 57</li> 
     <li>Item 58</li> 
     <li>Item 59</li> 
     <li>Item 60</li> 
     <li>Item 61</li> 
     <li>Item 62</li> 
     <li>Item 63</li> 
     <li>Item 64</li> 
     <li>Item 65</li> 
     <li>Item 66</li> 
     <li style="" class=""> 
    Multiple<br> 
    Lines 
    </li><li>Item 67</li> 
     <li>Item 68</li> 
     <li>Item 69</li> 
     <li>Item 70</li> 
     <li>Item 71</li> 
     <li>Item 72</li> 
     <li>Item 73</li> 
     <li>Item 74</li> 
     <li>Item 75</li> 
     <li>Item 76</li> 
     <li>Item 77</li> 
     <li>Item 78</li> 
     <li>Item 79</li> 
     <li>Item 80</li> 
     <li>Item 81</li> 
     <li>Item 82</li> 
     <li>Item 83</li> 
     <li>Item 84</li> 
     <li>Item 85</li> 
     <li>Item 86</li> 
     <li>Item 87</li> 
     <li>Item 88</li> 
     <li>Item 89</li> 
     <li>Item 90</li> 
     <li>Item 91</li> 
     <li>Item 92</li> 
     <li>Item 93</li> 
     <li>Item 94</li> 
     <li>Item 95</li> 
     <li>Item 96</li> 
     <li>Item 97</li> 
     <li>Item 98</li> 
     <li>Item 99</li> 
     <li>Item 100</li> 
    </ul> 

你可以看到從「多線」塊留下的空白。我怎樣才能自動'填補'這個空間？

問候， 凱文

Answer 1

您可以將min-height到ul li選擇了「多行」裏的最小高度添加。

在我的情況，我說這ul li

min-height:37px 

但是，只有解決了這個問題對我的默認字體大小和現在，每UL李先生將於高度至少37px，這可能不是什麼你要。

Answer 2

http://jsfiddle.net/ethBT/

我不認爲你可以自動填充這個空間。你的代碼的工作方式基本上說 - 把所有東西都留下來。由於一個項目較大，佔用更多空間。正如mrk剛纔指出的那樣，您可以將所有li的最小高度設置爲多行的最小高度。雖然這意味着所有的細胞將會是兩倍大，我不認爲這是你想要的。

我想不出一種可以獲得這種效果的替代方案，而不會讓某些東西給你更多的控制權。例如一張桌子。

Answer 3

問題是，在多行單元格中，只有2個像素將用於邊框，在佔用相同空間的兩個單元格中，將使用4個像素的邊框。這造成2個像素的差距。

一種解決方案是使用outline而不是border。 outline屬性確實不是佔用頁面上的空間;它只是在對象周圍繪製邊界的邊框。

因此，而不是border: 1px solid red，您可以使用outline: 1px solid red。

請自己來看看this jfiddle demonstration。請注意，我還添加了一個line-height: 1.4em，但這只是爲了給單元格留出更多空間，因爲具有outline屬性的單元格實際上有2個像素更深。