css3父元素宽度跟随子元素，并居中父元素

最新推荐文章于 2024-04-07 21:10:40 发布
最新推荐文章于 2024-04-07 21:10:40 发布
阅读量1.3k 收藏
点赞数
分类专栏： 前端layui 文章标签： css3 html5 html css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42197013/article/details/115128164
版权

父元素样式

white-space: nowrap;
    display: inline-block;

子元素样式

display: inline-block;

在父元素的外面包一层div并设置

text-align: center
温暖的松子
关注
专栏目录
[css]如何让一个元素div1的宽度由子元素的宽度决定，并超出父元素div0
Learning Machine learning Machine Learning
03-02 1万+
这里针对的都是block的元素 div0 div1 div1_1 div1_2 我希望做到的比较奇葩： 主要目的是使div横排 若div0的宽度够大，超过div1_1, div1_2的总和，则可以直接使用网上搜到的解决方案：使用float:left 在div1有一个较窄的父元素的情况下，希望div1的宽度可以由子元素撑开，超过父元素的宽度。。 div1中有并列的横排div
2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中
weixin_49752665的博客
11-25 1795
如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第三行标签盒子也设置flex布局。如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第一行也设置flex布局。再对第一行公司名称设置flex：1，实现不设置文字宽度的超出隐藏。另：以上两种情况，右侧盒子无需设置flex：1。设置最小高度是为了，当第三行标签不存在的时候，右侧盒子高度会小于图片高度，由于父元素设置了aline-items：center，右侧盒子会居中。
css 父元素的宽度随子元素的宽度变化
weixin_33708432的博客
06-20 3480
当最外面的层想要设置一个 overflow: hidden，但子元素又想他们能滚动，像今日头条的滚动导航一样： html： <div id="wrapper"> <ul id="scroll"> <li>cell 1</li> <li>cell 2</li> <li>cell...
css 父元宽度有子元素撑开
我是渣渣
09-13 2953
//在工作中用到 做个记录//html <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>//css ul{height: 90px;line-height: 90px;overflow-x: scroll; white-space: nowrap;} //隐藏滚动条 ul::-webkit-scrollbar
CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
ktutu的博客
06-20 7076
使用场景在移动端屏幕宽度有限的前提下，使用横向滚动的方式展示更多的内容。在这样的需求下，希望父元素作为容器，其宽度可以又横向排列资源的总宽度动态撑开，超过祖父元素的宽度；在不超过祖父元素时，自动继承100%的宽度。DOM结构如下： <div class="grantparent"> <div class="parent"> <div class="child
css 父级元素宽度根据后代元素最大固定宽度自适应
qq_34870529的博客
05-15 2087
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css 实用技巧</title> <style> div{ .
完美实现浮动元素横排居中显示
10-24
浮动元素居中主要指的是让一组浮动的元素（如列表项）在水平方向上居中显示，而这通常不是传统CSS的float属性所能直接实现的。因为float主要是为了将元素脱离文档流，并且向左或向右浮动，它本身没有提供居中对齐的...
css子元素位于div上下居中
最新发布
09-30
在CSS中，要将一个子元素垂直居中于其父元素内部，可以采用多种方法，这取决于父元素是否有固定的宽度，因为垂直居中有几种不同的策略。下面是几种常见的方法： 1. **Flexbox布局**（适用于现代浏览器）： ```css ....
css子元素在父元素中居中
weixin_51020122的博客
09-26 1660
1、子元素相对于父元素绝对定位：子元素的top、left设置为50%并且子元素margin-top和margin-left减去各自宽高的一半。5、子元素相对父元素绝对定位，子元素top，left值为50%，transform：translate（-50%，-50%）。4、子元素相对定位，子元素top，left值为50%，transform：translate（-50%，-50%）。2、子元素相对于父元素绝对定位：子元素上下左右全为0，然后设置子元素margin：auto。1、设置子元素和父元素的行高一样。
CSS的三大特性、盒子模型，圆角边框
weixin_51257719的博客
11-04 584
CSS的三大特性 一、层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题 层叠性原则: 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠 二、继承性 CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。 子元素可以继承父元素的样式： （text-，font-，line-这些元素开头的可以继承，以及color属性） 行高的继承性： 行高
css父子盒子的width问题
qq_44718039的博客
06-22 4244
css父子盒子的宽度问题
[css] flex 子元素自动撑开父元素宽度
qq_14993591的博客
11-03 3716
这样，子元素将会垂直排列在一列内，并自动撑开父元素的宽度。同样地，如果子元素的高度总和超过了父元素的高度，则子元素会被压缩，以适应父元素的高度。这样，子元素将会水平排列在一行内，并自动撑开父元素的宽度。如果子元素的宽度总和超过了父元素的宽度，则子元素会被压缩，以适应父元素的宽度。对于水平排列的情况，我们可以设置父元素的。对于垂直排列的情况，我们可以设置父元素的。
css 宽高自适应
taidabao的博客
04-07 560
css宽高自适应
【HTML-进阶-如何实现父级块级元素宽度自适应子元素宽度】
banglianqian3400的博客
10-13 1593
背景 块级元素宽度默认值为100%，而不是auto;因此其宽度不会根据子元素内容动态适应。 如何实现父级元素宽度动态适应其子元素。 方法一 display:inline; 给块级元素设置inline-block值。 { display: inline-block; } 方法二 绝对定位元素 给块级元素设置position：absolute/fixed; { position:a...
css元素子元素自适应大小的两种方法
Keep_Slience的博客
12-07 4138
简单说下css中子元素自适应大小的两种办法 1. 子元素设置百分比 <div class="box"> <div class="content"></div> </div> .box{ margin:100px auto; width: 100px; height: 100px; background: rgba(0, 0, 0, 0.6); } .content{ width: 80%; height: 80%; margin-top: 1
CSS 子元素在父元素中垂直居中
长沙火山
01-27 3812
父元素设置为相对布局，子元素设置为绝对布局，并且设置上下左右边距都为0，设置子元素的宽度为500px,这样就是子元素占据了整个容器，此时margin设置为auto才起作用，具体代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style>
CSS知识点总结2
一只小白657的博客
10-17 483
CSS知识点21.CSS元素显示模式1.1元素的显示模式1.2块元素1.3行内元素1.4行内块元素1.5元素显示模式总结1.6元素显示模式的转换1.7当行文字垂直居中的小技巧2.CSS的背景2.1背景颜色2.2背景图片2.3背景平铺2.4背景图片的位置2.5背景图片固定2.6背景复合写法2.7背景色半透明2.8背景总结3.CSS的三大特性3.1层叠性3.2继承性3.3优先性4.盒子模型4.1网页布局的本质4.2盒子模型(Box Model)的组成4.3边框(border) 1.CSS元素显示模式 1.1元素
css 父子盒子的width 问题
qq_44812835的博客
08-31 2863
平时在写css的时候，并没有刻意关注盒子的width属性，有时候要加，有时候不加，有时候默认占满父盒子，有时候却又没有宽度。今来看看到底有哪些情况 首先width它不是一个可以继承的属性，之所以可以和父盒子宽度一样，应该还是因为块级元素默认独占一行的缘故会撑满父盒子的宽度 知道它是因为块级元素的特性撑满父元素，很多现象就可以解释了 下面我们通过代码来一探究竟 //dom结构 <body> <div class="box"> <div class="son"&g.
css3 子节点等宽样式,css 设置div基于父元素宽度的宽高相等的样式
weixin_39759890的博客
08-03 1317
1. 前言在移动开发中，有时候需要设置一个宽高相等的div，并且为了使它能够适配更多的屏幕，于是需要让它的宽高和屏幕宽高成一定的比例。这里将提供一个css的解决方案，让一些后端开发不用再写繁琐的js。2. 实现代码html:testcss:.wrapper{position:relative;height:0;padding-top:80%;}.box{position:absolute;widt...
CSS-父元素宽度自适应子元素宽度之和
anleng6817的博客
08-22 3285
最近碰见这样一个需求，要让图片横向排列设置 x 方向的滚动条滚动查看，原本当直接创建一个 IFC（inline，float 什么的）就解决了，搞了半天发现搞不定（IFC 也是不能父元素宽度自适应子元素宽度之和的，因为会换行。。），最后用 flex 解决了（然后又发现使用 table 也是可以的），然后学了两个新名词 GFC 和 FFC。。这里就说一下我的解决方法，给大家抛个砖。 flex...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值