CSS让5个20%div排成一行

1、有时候，我们在写css样式的时候，会有pading和margin，边框的距离总是让我们的节点跑位了。实在太丑。

<style>
.item2{width:20%;margin:5px;padding:5px;background:#ccc;height:50px;float:left;}
</style>
<br>
20%宽度,受边框影响最后一个div会下沉<br>
<div style="widht:80%;">
<div class="item2">20%宽度</div>
<div class="item2">20%宽度</div>
<div class="item2">20%宽度</div>
<div class="item2">20%宽度</div>
<div class="item2">20%宽度</div>
</div>

变成这样：

2、有的方法通过在css里面进行加减运算，过于复杂了。

通过在父级加display:flex; 就可以无视无视margin和padding。

<style>
.item{width:20%;margin:5px;padding:5px;background:#ccc;height:50px;}
</style>
<br>
20%宽度，无视margin和padding<br>
<div style="widht:80%;display:flex">
<div class="item">20%宽度</div>
<div class="item">20%宽度</div>
<div class="item">20%宽度</div>
<div class="item">20%宽度</div>
<div class="item">20%宽度</div>
</div>

完美解决。

CSS让5个20%div排成一行相关推荐

三个并排居中html,css如何让三个DIV并列在一行中
--好评和差评--&gt:center;100&lt:73px;} html文件.news_con_oth{height:right; width:hidden:470px; < ...
html中如何div转换下一行,css如何让两个div不换行显示？
css如何让两个div不换行显示?让两个div并列显示?下面本篇文章就来给大家介绍一下使用CSS让两个div并列在一行显示的方法,希望对大家有所帮助. 在HTML中,div是块状元素,div盒子本身默 ...
div 左右并排,使用CSS如何让两个div并排显示
用CSS如何让两个DIV盒子并排体现呢? 各人知道默认情况下DIV是独占一排的,DIV不设置任何CSS格局,这个DIV盒子都邑独有一行踊跃换行. 运用CSS让两个DIV并排闪现,排成一排显示思空见贯方 ...
Web前端HTML+CSS全套（1~20）
Web前端HTML+CSS全套(1~20) 拨云见日 CSS基础切图流程 PC企业站布局 PC游戏站布局溯本求源 HTML扩展 CSS扩展 HTMLS新语法 CSS3新语法兼容与hack 风生水 ...
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
士兵队列训练问题：某部队进行新兵队列训练，将新兵从一开始按顺序依次编号，并排成一行横队，训练的规则如下：从头开始一至二报数，凡报到二的出列，剩下的向小序号方向靠拢，再从头开始进行一至三报数，凡报到三的
题目描述: 某部队进行新兵队列训练,将新兵从一开始按顺序依次编号,并排成一行横队,训练的规则如下:从头开始一至二报数,凡报到二的出列,剩下的向小序号方向靠拢,再从头开始进行一至三报数,凡报到三的出列, ...
div独占一行 html_css实现div强制不换行
css实现div强制不换行 DIV盒子没有赋予CSS样式时,默认DIV盒子是独占一行(宽度为100%). 一.对div设置float浮动样式对div设置float:left样式相当于是让div对象靠 ...
html文字于图片齐平,CSS控制图片和文字在同一行对齐显示
图片与文字是做网站必不可少的要素,我们在使用图片与文字布局时,如何让图片和文字在同一行对齐显示来制作出一个整齐的网页出来. 对于一些学做网站新手来说,图片和文字在同一行对齐显示却不是一件容易的事情,这 ...
css+文字排在底部,css怎么让文字居于div的底部
css怎么让文字居于div的底部发布时间:2020-11-30 11:02:25 来源:亿速云阅读:84 作者:小新小编给大家分享一下css怎么让文字居于div的底部,相信大部分人都还不怎么了解 ...

CSS让5个20%div排成一行

CSS让5个20%div排成一行相关推荐

最新文章

热门文章