-
2021-06-12 17:54:19
之前设置多个div横排显示都会使用float:left，这样使div脱离了文档流，不容易控制，不管是设置margin-left还是position，left都不会有效果。
后来我尝试了使用display:inline-block,这样就可以使用marginLeft来控制多个div之间的间距了。
Vue.component("bili-con1", {
template: `
`,{{list.name}}data() {
return {
styles: {
background: "deepskyblue",
width: "1200px",
height: "50px",
position: "absolute",
left: "50%",
marginLeft: "-600px",
},
listStyle:{
display:"inline-block",
marginLeft:"50px",
},
lists: [
{name: "首页"},
{name: "动画"},
{name: "番剧"},
{name: "国创"},
{name: "音乐"},
{name: "舞蹈"},
{name: "游戏"},
{name: "科技"},
{name: "数码"}
]
}
}
})
更多相关内容 -
div和css制作的微信公众号主页.html
2020-04-01 21:24:19div和css制作的微信公众号html主页， -
div横排布局导航
2018-06-19 16:30:06html （现在回想：以当时的水平是如何把这段代码放上去的，谁给我的勇气，可能是把CSDN当做云笔记本了） 搬砖，最为致命，何不加班！ 作为的一个小白，搬砖是不可能的，可是不可能是不搬砖的 LOL时事 百度搜索 淘宝...展开全文html （现在回想：以当时的水平是如何把这段代码放上去的，谁给我的勇气，可能是把CSDN当做云笔记本了）
<style type="text/css"> .apu_layered{width:100%;height:692px;color:#fff;background-color:#339933} .apu_font_middle{text-align:center;height:692px;padding-top:200px;} .apu_ap1{font-size:4em;margin:0px;} .apu_ap2{font-size:1.5em;padding-bottom:278px;} .apu_btns{display:flex;background-color:#777;opacity:0.8;justify-content:center;} .apu_btn{width:150px;height:50px;text-align:center;background-color:#acacac;} .apu_btn a{color:#fff;text-decoration:none;margin:auto;line-height:50px;} .apu_btn:hover{background-color:#111;} </style> <div class="apu_layered"> <div class="apu_font_middle"> <p class="apu_ap1">搬砖，最为致命，何不加班！</p> <p class="apu_ap2">作为的一个小白，搬砖是不可能的，可是不可能是不搬砖的</p> <div class="apu_btns flex-wrap"> <div class="apu_btn"><a href="http://lol.qq.com">LOL时事</a></div> <div class="apu_btn"><a href="https://www.baidu.com">百度搜索</a></div> <div class="apu_btn"><a href="https://www.taobao.com">淘宝网购</a></div> <div class="apu_btn"><a href="https://www.jd.com">京东白条</a></div> </div> </div> </div>搬砖中.....
-
div横向显示.html
2021-06-12 17:54:20demo* {margin: 0;padding: 0;}.t-ctn {width: 100%;overflow-x: auto;}.t-ctn .s-ctn {height: 150px;white-space: nowrap;...}.t-ctn .s-ctn div {font-size: 14px;box-sizing: border-box;white-space:...展开全文demo* {
margin: 0;
padding: 0;
}
.t-ctn {
width: 100%;
overflow-x: auto;
}
.t-ctn .s-ctn {
height: 150px;
white-space: nowrap;
font-size: 0;
}
.t-ctn .s-ctn div {
font-size: 14px;
box-sizing: border-box;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
display: inline-block;
width: 200px;
height: 100%;
border: 10px solid red;
}
titletitletitletitletitletitletitletitletitletitletitletitletitle
body
title
body
title
body
title
body
title
body
title
body
title
body
title
body
title
body
title
body
title
body
一键复制
编辑
Web IDE
原始数据
按行查看
历史
-
html中两个DIV怎么横排靠齐？
2020-12-20 05:22:02float:left也在下面靠，不在第一排，如图,DIV名称：#header_rCSS:*{margin:0px}body{background-color:#F0ECEC}#contain{width:968px;height:900px;background-color:#D8D7D7;margin-...float:left也在下面靠，不在...展开全文float:left也在下面靠，不在第一排，如图,DIV名称：#header_rCSS:*{margin:0px}body{background-color:#F0ECEC}#contain{width:968px;height:900px;background-color:#D8D7D7;margin-...
float:left也在下面靠，不在第一排，如图,DIV名称：#header_r
CSS:
*{margin:0px}
body{background-color:#F0ECEC}
#contain{
width:968px;
height:900px;
background-color:#D8D7D7;
margin-left:auto;
margin-right:auto;
}
#header{
width:968px;
height:100px;
background-color:#03CAFC;
color:#F8F8F8;
}
#header_l{
width:80px;
height:80px;
background-color:#03CAFC;
}
#header_r{
width:868px;
height:80px;
float:left;
}
#header_b{
width:968px;
height:20px;
}
#body{
width:968px;
height:720px;
background-color:#72EFF1;
}
#foot{
width:968px;
height:70px;
background-color:#020202;
}
HTML:
-
HTML+CSS-如何定义让两个div横向排列
2020-12-20 05:22:14方法一：一般情况，默认的div是写一个换一行，那么如何定义两个div横向排列而不换行呢？div默认的display属性是block。所以每一个div都是新的一行，现在把display换成inline就不会换新行了。aaabbb方法二：这里使用... -
三个div横排，中间的div自适应宽度
2014-05-11 18:00:30HTML： section-a section-b section-c CSS ： .container{position: relative; overflow: hidden;width: 100%; height: 180px;} .section-a, .section-b, .section-c{position: absolute;... -
html5:div 横向排列的方法
2021-06-09 10:17:43以下面这组 div 为例，wrap 的高度由内容撑开div1div2div3平时是这样的，上下排列~float 浮动#div1{float: left;}#div2 {float: right;}#div3 {float: right;}然后这样了成功横向排列了，但是有几个问题~float 的... -
css如何让两个div并排显示？
2020-12-20 05:21:57让两个Div并排显示的方法有很多，使用display的inline属性、通过设置float来让Div并排显示都可以实现，下面我们来看一下css实现两个div并排显示的方法。让两个Div并排显示一、使用display的inline属性两个div并排... -
如何让多个div横向排列（html+css）
2022-03-08 19:22:21div是块级元素，是自上而下、垂直排列会占满一行且具有自动换行功能。 方法一：使用flex自适应 <div class="all"> <div class="a"></div> <div class="b"></div> <div ... -
html – 2 div并排排列,如何使右div填充宽度100％？
2021-06-13 17:57:31如果你使用浮动，将宽度设置为100％的问题是它被认为是100％的容器，所以它不会工作，因为100％包括左div的宽度。编辑：Here是另一个答案的示例，为了简单起见，我已经编辑它包括来自示例站点的html / css。我还将其... -
Html和CSS如何可以并排3个div
2021-07-16 16:35:50I have 3 div's, 200px,300px and 200px how can I align them side by side, all the examples I have seen only include 2. I have Div1,Div2 working correctly but Div3 for some reason slides under Div1 lie ... -
html div横向排列
2019-03-06 11:31:04div class = " aui-row aui-row-padded " > < div class = " aui-card-list " > < div class = " aui-card-list-content-padded " > < img src = " ../../../img/goods.png " /> div > ... -
html ul li 横排 间距
2021-01-14 07:18:29设置ul的margin-left即可 li横排时相互间的距离通过各自的width和margin-left（或margin-right）设置 新手CSS布局HTML小编今天和大家分享助，关于html ul li 横排的间隙问题 代码： 网页效果： 如上图，如何设置... -
css实现div水平垂直居中：竖排居中，横排居中
2021-07-13 08:51:42css属性write-mode实现文字竖排 参考：css实现文字纵向排版并且....title-div{ height: 100%; width:70px; font-size: 20px; writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/ -
div容器位置 横排 / 纵排
2020-04-13 21:18:161.遇到的问题上图，本来想把黑色框放到箭头处 2.解决之后见图 上代码： ...DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <... -
DIV横向排列_CSS如何让多个div盒子并排同行显示
2020-12-20 05:21:59如何让多个div盒子并排同行div横向排列显示呢？我们先设置3个div盒子对象，什么css样式都不设置看看效果。代码如下：三个div盒子均独占一行显示div盒子本身默认样式属性是独占一行，而解决div独占一行方法通常有两种... -
html横向布局
2021-02-01 02:02:00标签：我们都知道html块级元素默认是垂直排列的，而行内元素时水平排列的，而在布局时基本上都是用块级元素，如div等常用块级标签，那么如何让块级元素也进行水平排列呢？这里我总结了五种方式，并简单总结了这五种... -
div 内的div 一行一排改成自动换行
2022-03-01 17:59:40里面的子div 加上css 样式 float: left; -
DIV+CSS 兼容小集
2020-12-13 15:40:27},目的就是让div自动适应内容高度 2、横排的div外套div 另外设定 ul { margin: 0px; padding: 0px; } 是消除li前面的空格 div+css兼容性问题 CSS 兼容要点：DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, ... -
如何让DIV随同层最高DIV自适应高度？
2021-06-18 03:51:21同层级有6个DIV，都随内容自适应，且有边框圆角属性，如何用纯CSS实现所有DIV高度一致。HTML推荐排序离我最近离我最近离我最近离我最近离我最近离我最近离我最近SCSS.con-pop{width:92%;margin:1.5rem 4%;.sort-box{... -
div横排放置对齐问题；block,inline,inline-block区别
2019-09-24 03:50:181、左右两个div都设置为float:left，如果右边div没有设置宽度，右边div的宽度会根据div里的内容自动调整。 缺点：不易控制 2、只有左侧div设置为float:left，右侧div设置overflow:auto;，右侧div将会占据整个右侧... -
网页布局--------在一个 div 里面放多个横排 div 实现方法 比较一下，flex 最好
2021-04-27 19:31:16">haaaaaaaaaaaaaaaaaadiv> <div class="test"> <div class="box box1">div> <div class="box box2">div> div> <div style="background-color: red; clear:both">hahahahahahahdiv> body> 方法2 子元素设置 float: ... -
多个div横向排列的几种方法
2021-07-15 14:49:31以下面这组 div 为例，group的高度由内容撑开 <div id="group"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> </div> ... -
HTML – 如何居中背景div？
2021-06-09 05:12:12我确实把“额外标记”作为解决方案的问题,包括仅用于显示背景图像的div(#backgroundBlock),因为它不是语义的.>描述：您的第一个解决方案>问题：>额外加价>在Chrome上,根据页面大小,像素可以不同方式对齐... -
多个div横向排列
2021-06-09 14:15:42画面要求显示一定数量的div元素,比如20个然后有一个下拉列表来指定每页显示的个数,Case1:如果每屏显示2个想要的结果就是 当前屏幕显示前两个div元素和一个横向滚动条滚动条往右拖,显示第三个和第四个以此类推.Case12... -
html5:div 横向排列的方法。
2017-11-21 12:06:47div 横向排列的方法。 以下面这组 div 为例，wrap 的高度由内容撑开 <div id="wrap"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</...
