边境崩溃

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;} 

编辑：这是一个好主意，了解在评论中链接到空白的烦恼。请注意，应用该修复会移动需要调整的像素。