标签：shrink tle styles code css link oct 换行 pad
用伪元素模拟边框然后缩放0.5
ul li::after {
content: ‘‘;
width: 1px;
height: 70px;
background-color: red;
position: absolute;
right: 0;
top: 0;
/* 解决手机端有些时候1像素看起来想两像素的问题 */
transform: scaleX(0.5);
}
正常文档流的情况下，水平盒子如果排不开会自动换行 那么结果就是滚动容器的内容的宽度永远不会大于滚动容器自身的宽度
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/横向滚动条.css">
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.box {
// 超出宽度，加滚动条
overflow-x: auto;
}
.box ul {
// 使子项水平排列
display: flex;
}
.box ul li {
flex: 100px;
// 不换行
flex-wrap: nowrap;
/* 默认状态下，子元素的宽度之和超过容器的会被压缩，忽略掉我们自己设置的宽度 */
flex-shrink: 0;
border: 1px solid #ccc;
height: 100px;
line-height: 100px;
text-align: center;
background-color: #09f;
}
标签：shrink tle styles code css link oct 换行 pad
原文地址：https://www.cnblogs.com/xiaoaitongxue/p/12709582.html
