首页 > 其他分享 >多个div放在一起,边框重叠去重

多个div放在一起,边框重叠去重

时间:2023-05-10 17:36:18浏览次数:34  
标签:重叠 bottom 边框 cell ul 1px div li margin

多个div放在一起,边框如何去重

先看一下效果

 在看一下改进后的效果

 是不是舒服多了。

上代码

 <ul class="firstul">
        <li>cell</li>
        <li>cell</li>
        <li>cell</li>
        <li>cell</li>
        <li>cell</li>
    </ul>

CSS

ul.firstul{ display:table;border-collapse:collapse; margin-top:25px;margin-left:25px;}
ul.firstul>li{display:table-cell;padding:15px;border:1px solid #ccc;}

关键性代码:border-collapse:collapse;


上面的例子是把ul和li转换为表格的形式,如果想根据窗口的大小,来控制一行显示的格式,上面的方法就无法解决了,如下的例子

 

 

ul.secondul{width:150px;overflow:hidden;padding-bottom:1px;margin-left:25px;}
ul.secondul>li{width:50px;height:50px;line-height:50px;float:left;text-align:center;border:1px solid #ccc;margin-right:-1px; margin-bottom:-1px;}

主要用到li的margin-right:-1px  margin-bottom:-1px;以及外面的ul  padding-bottom:1px(不用的话下面的线会不显示,因为margin-bottom:-1px  超出了div的范围)

标签:重叠,bottom,边框,cell,ul,1px,div,li,margin
From: https://www.cnblogs.com/youmingkuang/p/17388615.html

相关文章

  • 用chatgpt ui 实现 对于时间段集合中的每个时间段,检查它是否与要检查的时间段重叠或者
    以下是一个C#实现,用于确定一个时间段是否与另一个时间段集合重叠或交叉,如果有重叠或交叉则返回false。算法:传递要检查的时间段和时间段集合作为参数。对于时间段集合中的每个时间段,检查它是否与要检查的时间段重叠或者有交叉。如果有重叠或交叉,则返回false表示它们不应该......
  • HTML div 和 span 标签
    4.1<div></div>-划分页面区域,独占一行4.2<span></span>-主要用于对文本独立修饰。-内容有多宽就占用多宽的空间,不换行,不破坏原有结构......
  • Codeforces Round 872 (Div. 2) A-D
    比赛地址A.LuoTianyiandthePalindromeString题意:给一个回文串,求最长的非回文子串的长度Solution判一下回文串是不是由相同的字母组成的,如果是的那么无解,如果不是答案就是len-1voidsolve(){ strings;cin>>s; intlen=s.length(); intsum=1; for(inti=1;i<s.leng......
  • CF1198 Div1做题记录
    ACF题面排序,前缀和统计\(\left[1,i\right]\)内有多少不同数字,枚举\(l\),二分\(r\),显然的是\(l,r\)等于某一个数字最好,所以可以得到对于每个\(l\),最多有多少数字不被修改。点击查看代码#include<bits/stdc++.h>#defineullunsignedlonglong#definelllonglong#d......
  • 435. 无重叠区间
    给定一个区间的集合intervals,其中intervals[i]=[starti,endi]。返回需要移除区间的最小数量,使剩余区间互不重叠。输入:intervals=[[1,2],[2,3],[3,4],[1,3]]输出:1解释:移除[1,3]后,剩下的区间没有重叠。我的解法解法思路与最少数量的箭引爆气球相同,先将......
  • QT设置窗口边框圆角
    1.直接设置样式  setStyleSheet("border:5pxsolidred;border-radius:10px")2.this->setAttribute(Qt::WA_TranslucentBackground);//设置窗口背景透明this->setWindowFlags(Qt::FramelessWindowHint);//设置无边框窗口 voidSystemWarnDialog::paintEvent(Q......
  • CF1825 div 2
    A结论题删掉一个或者全相同。//Problem:A.LuoTianyiandthePalindromeString//Contest:Codeforces-CodeforcesRound872(Div.2)//URL:https://codeforces.com/contest/1825/problem/A//MemoryLimit:256MB//TimeLimit:1000ms////PoweredbyCPE......
  • Codeforces Round 872 (Div. 1 & Div. 2)
    这场寄大了。Mypredictorsay-101pts。https://codeforces.com/contest/1824https://codeforces.com/contest/18252A.LuoTianyiandthePalindromeString因为给出的\(s\)是一个回文串,所以答案只可能是\(-1\)或者\(n-1\),只需要看一下删掉哪一个即可,然后判定,这些都......
  • CodeForces - 597A Divisibility (模拟)
    TimeLimit: 1000MS MemoryLimit: 262144KB 64bitIOFormat: %I64d&%I64uCodeForces-597ADivisibilitySubmit StatusDescriptionFindthenumberof k-divisiblenumbersonthesegment [a, b].Inotherwordsyouneedtofindthenumberofsuchintegerv......
  • Codeforces Round 871 (Div. 4)
    A.LoveStory#include<bits/stdc++.h>usingnamespacestd;#defineintlonglongintread(){intx=0,f=1,ch=getchar();while((ch<'0'||ch>'9')&&ch!='-')ch=getchar();if......