html – 当水平居中时,li被切断
我正在尝试使用flexbox布局li.我把它们设置为列,每列有3个li.问题是当我想要将ul置于中心位置
我使用align-content:center居中使用ul.当我这样做,并且比页面可以显示(溢出)更多的李,李的开始被切断. (左侧的那个被切断,右边的那个显示正常.) 我不会有特定数量的李,可能在4到50之间.所以我不能删除对齐内容:中心,因为当我有少量的李,(让我们说4),结果不是什么我想要. 如何使中心的ul不会被切断? JSFiddlehtml,body { margin: 0; height: 100%; } div { align-items: center; justify-content: center; height: 100%; display: flex; overflow: auto; background-color:aqua; } ul { margin-top: auto; margin-bottom: auto; flex-direction: column; width: 100%; height: 70%; padding: 0; display: inline-flex; flex-wrap: wrap; align-content: center; } li { flex-basis: calc(100% / 3 - 2px); /* Subtract the border */ color: firebrick; border: 1px solid firebrick; background-color: greenYellow; list-style-type: none; width: 200px; } <div> <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> </ul> </div> 解决方法
这是一个非常好的问题,有一些困难找到一种方式来实现这一行为. 我不相信你会发现一个纯粹的CSS解决方案,但是我们可以使用一些javascript. 基本上我创建了一个附加到窗口大小事件的脚本,它将执行以下操作: 检查我们的包装元素中有多少项目:#wrapper 这样做我们强制在父元素中的溢出,并且滚动条将具有正常的行为,显示每个元素. 完整的代码可用于 检查以下示例: function onResize() { var wrapper = document.querySelector('#wrapper'); var items = wrapper.querySelectorAll('li'); var columns = Math.ceil(items.length / 3); var width = 200 * columns; wrapper.style.width = width > window.innerWidth ? width + 'px' : '100%'; } onResize(); window.addEventListener('resize',onResize); html,body { height: 100%; text-align: center; } *,*:before,*:after { box-sizing: border-box; padding: 0; margin: 0; } #wrapper { height: 100%; display: inline-flex; align-items: center; justify-content: center; background-color: aqua; } ul { height: 75%; list-style: none; display: flex; align-content: center; flex-direction: column; flex-wrap: wrap; } li { flex-basis: calc(100% / 3 - 2px); color: firebrick; border: 1px solid firebrick; background-color: greenYellow; width: 200px; display: flex; align-items: center; justify-content: center; } <div id="wrapper"> <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> </ul> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |