<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title></title>

  <style>

		li{

			list-style: none;

		}

		.box1{

			width: 400px;

			height: 100px;

			overflow-y: hidden;

			overflow-x: scroll;

			/* position: relative; */

		}

	   .box2{

			display: flex;

			/* position: absolute; */

		 }

		 .box2 li{

			 width: 50px;

			 height: 50px;

			 flex-shrink: 0;

			 line-height: 50px;

			 background: red;

			 margin: 15px;

			 text-align: center;

			 color: #fff;

		 }

  </style>

</head>

  <body>

	<div class="box1">

		<ul class="box2">

			<li>1</li>

			<li>2</li>

			<li>3</li>

			<li>4</li>

			<li>5</li>

			<li>6</li>

			<li>7</li>

			<li>8</li>

			<li>9</li>

			<li>10</li>

		</ul>

	</div>

  </body>

</html>

　　代码中，第一种可以使用 position: absolute;给box2，其父元素使用相对定位，使得box2的子元素可以横向滚动，改变display:flex布局的自适应；
　　
　　第二种是使用  flex-shrink: 0; 让其display:flex；不在收缩宽度；

css 控制横向布局，超出隐藏，滚动的更多相关文章

  1. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. CSS控制文字，超出部分显示省略号

    http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: now ...

  3. css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...

  4. css强制换行和超出隐藏实现

        一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...

  5. css控制滚动条的出现隐藏导致的页面闪动的问题

    之前这些小细节都在实践的时候给忽视了,或者都动态加载,框架的使用等因素的隐藏,变得不那么容易出现. 今天看到张鑫旭大牛的微博,觉得记录一下这个小问题的解决方案 <div style=" ...

  6. css 解决fixed 布局下不能滚动的问题

    如果我们布局的是后是fixed并且想要高度为100%的时候,我们一般会这样设置: div { display:fixed; height:%; overflow:scroll; } 但是这样并不会出现 ...

  7. CSS - 控制最后边框的隐藏或设置为none

    div{       width: 20%;       border-left: 1px solid $border-color;       &:nth-child(5n+1){      ...

  8. CSS多行文字超出隐藏加省略号

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ...

  9. CSS 控制table 滑动及调整列宽等问题总结

    一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...

随机推荐

  1. 【译】使用 Flutter 实现跨平台移动端开发

    作者: Mike Bluestein   | 原文地址:[https://www.smashingmagazine.com/2018/06/google-flutter-mobile-developm ...

  2. HDU-6397(2018 Multi-University Training Contest 8) Character Encoding(生成函数+组合数学)

    题意 从$0$到$n-1$的数字里可重复的取至多$m$个数的和等于$k$的方案数. 思路 显然的生成函数的思路为构造 $(1+x+x^{2}+...+x^{n-1})^{m}$ 那么$x^{k}$的系 ...

  3. 记事本：一些js案例以及DOM和BOM

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 按Ctrl+Enter发送的实现

    按Ctrl+Enter发送 1, 监听textarea的onkeydown事件 <textarea tabindex="1" class="ie6ta" ...

  5. c# 序列化效率比拼

    前言:作为开发人员,对象的序列化经常用到,特别是在现在前后端分离 采用json 交互 ,就将原来用过的几种方式总结了下,也算是做一个记录,顺便做了下性能测试. 1:内置 JavaScriptSeria ...

  6. pointer-events属性屏蔽鼠标事件（点击穿透上层元素）

    应用场景 我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的 ...

  7. LaTex basics

    分节: \section{Supplemental Material}\label{sec:supplemental} 小节: \noindent {\bf Preparing References: ...

  8. linux的cron

    linux系统由cron(crond)这个系统服务来控制的,linux系统上原来有非常多的计划性工作,因此,这个系统服务是默认启动的.cron进程每分钟会定期检查是否有要执行的任务,如果有就自动执行该 ...

  9. Android应用市场的帮助类

    写了一个Android应用市场的帮助类,如下: public class MarketUtils { public static final String MARKET_DATA = "ma ...

  10. 射线法（1190 - Sleepwalking ）

    题目:http://lightoj.com/volume_showproblem.php?problem=1190 参考链接:https://blog.csdn.net/gkingzheng/arti ...