Question

我正在尝试在单个列中显示项目列表。列表很长，所以如果它们都不合适，我希望它滚动。

在所有浏览器上左右边距不显示

在 chrome 上：问题是如果窗口变小，顶部项目会随着窗口缩小而消失并隐藏。还有第一项缺少上边距。

在 IE11 上，有时行不会占用100％但会收缩到内容宽度。如果我调整IE窗口的大小，它会正确显示。

修改：

删除justify-content: center;后，它解决了Chrome上的垂直问题，但 IE11

突然没有显示下边距

这是CSS

body {
 height: 100%;
 width: 100%;
 margin: 0pt;
 padding: 0pt;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 background-color: #e6e6fa;
}

div.list {
 max-height: 80%;
 width: 60%;
 margin: 0pt;
 padding: 0pt;
 display: flex;
 flex-wrap: nowrap;
 flex-direction: column;
 overflow-y: auto;
 flex: 0 1 auto;
 background-color: red;
 justify-content: center;
 align-items: center;
}

div.list .row {
 width: 100%;
 margin: 4pt 12pt 4pt 12pt;
 padding: 0pt;
 display: flex;
 flex-wrap: nowrap;
 flex-direction: column;
 flex: 0 0 auto;
 box-shadow: 0 0 4px #000000;
 background-color: #ffffff;
}

div.list .row .content {
 width: 100%;
 margin: 0pt;
 padding: 0pt;
 flex: 0 0 auto;
 direction: rtl;
 text-align: right;
}

这是HTML

<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
  <div class="list">
   <div class="row">
    <div class="content" style="color:#2b8ACA">title</div>
    <div class="content">description</div>
    <div class="content" style="color:#BABABA">date</div>
   </div>
  </div>
 </body>
</html>

有谁能解释我做错了什么？感谢。

CSS flexbox单列列表项问题

0 个答案: