HTML形成带边框的单独列

我有4列,我需要将每个列与边框分开.现在看起来像：

它应该是什么(例如红/蓝颜色)：

问题是我没有列的任何div,我在< li>内生成行< /锂>所以4里面的输入< li> < /锂>是1排：

你有什么想法我怎样才能做到这一点？这是FIDDLE

最佳答案

如果您强烈需要将其保持为行,则可以选择使用绝对定位的div.

#personal-details{
  position: relative;
}
ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
li{
  width: 25%;
}
.parent{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.borders{
  display: flex;
  justify-content: space-between;
  height: 40px;
}
.border{
  border: 1px solid red;
  width: 25%;
}

注1

请注意,你不应该把div直接放在ul里面,所以这是不正确的：

笔记2

如果你按照列的方式生成它们,这将是一个更好的做法,这样你就不需要使用CSS了.

期望的标记

解

ul{
  list-style: none;
}
#personal-details{
  margin: auto;
  display: flex;
  justify-content: space-between;
}
#personal-details > li{
  padding: 20px;
  border: 1px solid red;
}
.column{
  padding: 0;
  text-align: center;
}

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。