ul,li做的一个类似表格的框,设置border后,中间相交的部分因为重叠变粗

iryn

9651823

发布于
2017-07-05

如图,有什么优雅的解决方案么,不想一个一个的设置border-right

css html

阅读 13.7k

9 个回答

得票最新

Fiona

264611

发布于
2017-07-05

html:

<ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>

css:

   *{ margin:0; padding:0;}
    ul{ 
        width: 520px; 
        height: 312px; 
        margin: 50px auto; 
    }
    ul li{ 
        list-style: none; 
        width: 100px; 
        height: 100px; 
        float: left; 
        border: 1px solid #999; 
        margin: 0 0 -1px -1px;
    }

只要给每个li设置css属性 margin：0 0 -width -width 就可以了,其中的width是我们给li设置的边框宽度

tianlai

32027

发布于
2017-07-05

在 head 标签内设置 div ul li {...}

zollero

3.8k2824

发布于
2017-07-05

只给左边第一个设置左边框，所有都是右边框；

/*style*/
.assert-item {
    border-right: 1px solid #ddd;
}
.assert-item:first-child {
    border-left: 1px solid #ddd
}

li {
    border-right: 1px solid #ECECEC;
    border-bottom: 1px solid #ECECEC;
}

li:nth-child(3),
li:nth-child(6),
li:nth-child(9){
    border-right: 0;
}

张伟伟3x3

35814

发布于
2017-07-05

可以使用负margin解决。margin的值等于边框宽度的相反数。

li {margin: -1px 0 0 -1px;}

sayhi

2219

发布于
2017-07-05

ul设置上边框和左边框，li设置下边框和右边框不就行了么

魏其上

19811433

发布于
2017-07-05

li{
  margin:0 0 0 0 -1px;
}

Robin

161

发布于
2017-07-05

li只要设置右边和下边的边框即可,border-right,border-bottom

zhiwei

1.4k1717

发布于
2017-07-05

<html>

<head>
  <title>123</title>
  <script type="text/javascript">
    function createDiv() {
      var s1 = document.getElementById('s1');
      var item = s1.value;
      var hasChild = container.children.length ? true : false;
      if(hasChild){
        while(container.hasChildNodes()) //当div下还存在子节点时 循环继续
        {
            container.removeChild(container.firstChild);
        }
      }

      //制定策略
      var strategy =[2,10,20];
      var strategyRow = [1,2,4];
      var strategyIndex = 0;
      //获取策略方案
      for( var index = 0 ; index < strategy.length ; index++) {
        var current = strategy[index];
        if (item <= current) {
          strategyIndex = index;
          break;
        }
      }
      //使用策略
      //当前策略
      var row = strategyRow[strategyIndex];
      var column = item / row;
      var percent = (100 - column - 1 ) /column + '%';
      for(var i = 0; i < row; i++){
         var rowDiv = document.createElement("div");
         for(var j = 0; j < column; j++){
           var columnDiv = document.createElement("div");
           columnDiv.style.cssText=" float:left;height:300px;background-color: #00aa00;"+"width:" + percent+ ";";
           columnDiv.class = "column";
           rowDiv.appendChild(columnDiv);
         }
         container.appendChild(rowDiv);
      }

    }

  </script>
<style>
  html{
    height: 100%;
  }
  body{
    height: 100%;
    margin: 0px;
  }
  .content aside{
    display: block; height:100%; width:50px; background-color:red;
  }
  #container div > div{
    margin-right: 1% ;
  }
  #container div > div:first-child{
    margin-left: 1% ;
  }

  /*#container div> div:nth-child(2n+1){
    margin-left: 5px ;
  }*/
</style>

</head>

<body>
  <select id="s1" >
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="8">8</option>
    <option value="10">10</option>
    <option value="20">20</option>
  </select>
  <button onclick="createDiv()">确定</button>
  <div id="container" />
  <div class="content" >
    <aside >
      <div>111</div>
      <div>222</div>
      <div>333</div>
    </aside>
    <div style="height: 100px;"></div>
  </div>


</body>

</html>

这篇回答已被忽略，原因：不符合答题规范，内容不是答案，可用评论、投票替代

操作者：清蒸不是水煮

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

ul,li做的一个类似表格的框,设置border后,中间相交的部分因为重叠变粗

你尚未登录，登录后可以

怎么把一个矩形div变成一个直角三角形？

怎么去掉聚焦文字处的光标竖线？

Web 上的室内导航效果是如何实现的呢？

浏览器可以直接解析scss文件了吗？

Flask中static文件夹下的本地图片无法在HTML页面加载怎么办？

图片沿着圆环的转动有什么方法吗？

css布局怎么保证右边一直在可视范围内？