邊境崩潰

Question

HTML網格佈局我有我想要顯示爲一格一個Web頁面上的數據的列表。通常，我可能使用<table>來做到這一點，但數據在語義上並不是表格式的，所以沒有理由擁有固定數量的列（我希望單元格自動換行，並重排爲父元素的寬度變化）。

我可以通過將顯示元素設置爲display: inline-block並將其設置爲width來實現。這就是我想要的佈局。然而，這也會導致一些問題時，我想設置一個border;邊框顯示在元素之間加倍，並且只在外部單獨顯示。

如果我使用一個表，我會成立border-collapse: collapse，這將使它發揮作用。但這似乎並沒有對inline-block解決方案做任何事情。

我如何可以摺疊連續inline-block元素之間的邊界？或者是否有其他方式讓網格佈局允許這樣做？

Answer 1

nowdays你可以使用彈性。

對於邊界，你可以從陰影吸引他們，並添加陰性切緣重疊他們：

ul , li{ 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    padding:1em; 
 
} 
 
li { 
 
    min-width:40px;/* you can let content decide */ 
 
    min-height:40px;/* you can let content decide */ 
 
    box-shadow:inset 0 0 0 1px; 
 
    margin:0 -1px -1px 0; 
 
    /* flex makes also x,y alignement easy */ 
 
    align-items:center; 
 
    justify-content:center; 
 
}

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

http://codepen.io/gc-nomade/pen/BpMpZb

Answer 2

一些可能的解決方案浮動在我的腦海：根據他們在哪裏

1）塊負的設置空間。你可以有類（即右邊緣，左邊緣，三明治）並操縱邊距，使邊框重疊。

2）爲中間的塊設置左右邊界爲0px。兩種方式，我會走過去：

CSS 
.sandwiched {border:1px 0px 1px 0px;} 
.sandwiched {border-left:0px; border-right:0px;} 

編輯：這是一個好主意，瞭解在評論中鏈接到空白的煩惱。請注意，應用該修復會移動需要調整的像素。