Question

我想使用li创建2列，并且需要为li的每一个添加边框，但是对于2 li有双边框，这是我尝试的：< / p>

.ul1 {
    column-count: 2;
    column-gap: 0px;
}

.li1 {
    border: 1px solid blue;
}

    <ul class="ul1">
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
    </ul>

根据我的尝试，我可以使用child选择器来解决此问题：

Demo

HTML文件

    <ul class="ul1">
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
      <li class="li1">Test</li>
    </ul>

CSS文件

.ul1 {
  column-count: 2;
  column-gap: 0px;
}

.li1 {
  border-top: 1px solid blue;
  border-left: 1px solid blue;
  border-right: 1px solid blue;
  margin-right: -1px;
  &:nth-child(5) {
    border-bottom: 1px solid blue;
  }
    &:nth-child(10) {
    border-bottom: 1px solid blue;
  }
}

但是我不确定这是否是一种好的做法，或者有更好的方法，我可以就如何解决这个问题使用一些指导和建议。

Answer 1

在CSS下方尝试

   .ul1 {
      column-count: 2;
      column-gap: 0px;
    }

    .li1 {
      border-top: 1px solid blue;
      border-left: 1px solid blue;
      border-right: 1px solid blue;
      margin-right: -1px;
     list-style: none;
    }

    .ul1 li:last-child, .ul1 li:nth-child(5) {
 border-bottom: 1px solid blue; 
margin-right: -1px;
}

Answer 2

如果您有修订列表，则可以尝试使用:nth-child(-n+5)，它将选择列表中的前五个孩子，您可以在其中控制border。

检查以下代码段。

.ul1 {
  column-count: 2;
  column-gap: 0px;
}

.li1 {
  border: 1px solid blue;
  border-bottom: 0px;
}

.li1:nth-child(-n+5) {
  border-right: 0px;
}

.ul1 li:last-child,
.ul1 li:nth-child(5) {
  border-bottom: 1px solid blue;
}

<ul class="ul1">
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
</ul>

Answer 3

根据您的问题，我尝试在<li>元素的2列上添加边框列表<li>元素如下所示：

<html>
<head>
<style>
ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
#double li  { width:50%;} <span class="code-comment">/* 2 col */</span>
#triple li  { width:33.333%; } <span class="code-comment">/* 3 col */</span>
#quad li    { width:25%; } <span class="code-comment">/* 4 col */</span>
#six li     { width:16.666%; } <span class="code-comment">/* 6 col */</span>
</style>
<title>demo</title>
</head>
<body>
<ul id="double"> <span class="code-comment"><!-- Alter ID accordingly --></span>
  <li>CSS</li>
  <li>XHTML</li>
  <li>Semantics</li>
  <li>Accessibility</li>
  <li>Usability</li>
  <li>Web Standards</li>
  <li>PHP</li>
  <li>Typography</li>
  <li>Grids</li>
  <li>CSS3</li>
  <li>HTML5</li>
  <li>UI</li>
</ul>
</body>
</html>

以上代码的输出显示在打击图像中：

Output Image Is Here

我认为代码对您有用。谢谢。

Answer 4

请在下面检查

.ul1 {
  column-count: 2;
  column-gap: 0px;
    margin:0;
     border-right: 1px solid blue;
     border-bottom: 1px solid blue;
     padding:0;
         
}

.li1 {

  border-left: 1px solid blue;
  border-top: 1px solid blue;
  
}

<ul class="ul1">
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
</ul>

它将起作用的示例

在<li>元素的2列上添加边框列表<li>元素

4 个答案: