空き領域が多すぎます（浮動小数点数）

Question

浮動小数点数は浮動小数点数です。これは私のコードです：

<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

あなたは「複数行」のLiの最小の高さにul liセレクタにmin-heightを追加することができます。私の場合は

、私はul li

min-height:37px 

にこれを追加しかし、唯一の私のデフォルトのフォントサイズのための問題を解決し、今、EVERY UL Liは何もないかもしれない、高さが少なくとも37pxになることあなたは欲しい。

Answer 2

http://jsfiddle.net/ethBT/

私はあなたが自動的にこのスペースを埋めることができないと思います。あなたのコードが基本的に動作する方法は、すべてのものが残っているということです。 1つのアイテムが大きいので、より多くの部屋を占有します。 mrkが今指摘しているように、すべてのliの最小高さを複数行の最小高さに設定することができます。これは、すべての細胞が2倍の大きさであることを意味しますが、これはあなたが望むものではないと思います。

私は、この効果を得るための代替手段について考えることはできません例えばテーブル。

Answer 3

問題は、複数行のセルでは、2つのセルだけが同じスペースを占める2つのセルのように、境界に4ピクセルしか使用されないことになります。これにより、2ピクセルのギャップが作成されます。

borderの代わりにoutlineを使用する方法があります。 outlineプロパティはではありません。はページのスペースを占有します。それは他のすべての上にオブジェクトの周りに境界線を描画するだけです。

border: 1px solid redの代わりに、outline: 1px solid redを使用できます。

this jfiddle demonstrationを参照してください。 line-height: 1.4emも追加されていますが、これはセルを少しだけ余分にすることです。outlineのセルが効果的に2ピクセルほど深くなっているためです。