[CSS3] Make a horizontal-scrolling Menu
Our web app on desktop may use elements that use great deal of width. On many occasions we can’t simply turn these elements into columns so that they fit on a small screen. Such elements may not only fit inadequately on small screens, they could ruin the entire layout of our page if we’re not careful. In many cases, we can use a horizontal-scrolling menu to preserve the width, but keep it easily usable.
<nav>
<a href="">Home</a>
<a href="">My Profile</a>
<a href="">Favorites</a>
<a href="">Links</a>
<a href="">Tasks</a>
<a href="">Promotions</a>
<a href="">Settings</a>
</nav>
nav {
display: flex;
overflow-x: auto; /*Allow children in nav can overflow in x direction*/
-webkit-overflow-scrolling: touch; /*Let the scroll more smoothing*/
margin: 10px 0;
} a {
margin-right: 20px;
margin-bottom: 10px;
white-space: nowrap;
}
[CSS3] Make a horizontal-scrolling Menu的更多相关文章
- 推荐25个帮助你提高技能的 CSS3 实战教程
使用 CSS,你能够以极高的效率和易用性创造出美丽的设计.而目前流行的 CSS3 技术更加强大,能够创造更多丰富的效果和功能,而不需要任何外部插件.今天,我为大家收集了25个很有用的 CSS 教程,技 ...
- 使用HTML5、CSS3和jQuery增强网站用户体验[留存]
记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类 ...
- fullpage.js 具体使用方法
1.fullpage.js 下载地址 https://github.com/alvarotrigo/fullPage.js 2.fullPage.js 是一个基于 jQuery 的插件,它能够很方便 ...
- Cai_Sublime
Cai_Sublime Package Control:插件包管理工具 The simplest method of installation is through the Sublime Text ...
- WM (Constants)
Create page WM (Constants) Summary WM_* Constants and their definitions or descriptions and what c ...
- Subline Text默认设置文件Preferences.sublime-settings—Default详解
Subline Text中,点击Preferences,选择Settings - Default 全部属性解析 // While you can edit this file, it's best t ...
- 打造自己个性的notepad ++
对coder来说,notepad ++ 是一个很不错的文本编辑器.平时用来看看代码.xml文件,都比系统自带的记事本舒服得多.不过,对于像我这种每天用notepad ++写代码的人,一个原装的note ...
- Tabs - 选项卡插件
接上篇Tabs - 选项卡插件 其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充 9)Flipping C ...
- Sublime Text 2 -Sidebar 背景色调整为黑色
Sublime Text 2 编辑器: Ctrl+` 输入安装代码,安装package control 插件 ctrl+shift+P : Package install 为什么装不上了呢?出现了什么 ...
- 【原创】Linux基础之命令行浏览器links
有时服务器环境受限,比如在内网环境不能暴露端口从外网访问,用curl看html代码比较累,这时可以使用命令行浏览器来查看相关页面 links 官方:http://links.twibright.com ...
随机推荐
- form表单中图片也可以当作提交按钮
点击图片按钮时,不光提交其他输入框信息,还把鼠标点击图片上的x,y坐标也传输过去了
- SRM-697-DIV2
Div2 Medium: DivisibleSetDiv2 Problem Statement You are given a vector <int> b containing ...
- Spring Boot (24) 使用Spring Cache集成Redis
Spring 3.1引入了基于注解(annotation)的缓存(cache)技术,它本质不是一个具体的缓存实现方案,而是一个对缓存使用的抽象,通过在既有代码中添加少量它定义的个助攻annotatio ...
- 商业计算中Java高精度计算BigDecimal类
<Effective Java> 第48条:如果需要精确的答案,请避免使用float和double. 如果我们编译运行下面这个程序会看到什么?public class Test{ p ...
- 联想 K10(K10e70) 免解锁BL 免rec Magisk Xposed 救砖 ROOT 版本号 S206
>>>重点介绍<<< 第一:本刷机包可卡刷可线刷,刷机包比较大的原因是采用同时兼容卡刷和线刷的格式,所以比较大第二:[卡刷方法]卡刷不要解压刷机包,直接传入手机后用 ...
- O-理解共享池
我们可以通过show sga命令查看共享池的整体组成部分: ....待截图.... 一.SGA内存结构 Oracle中SGA主要包括: 1.固定数据结构部分(FIXED Size) 2.数据块缓冲区( ...
- ProE常用曲线方程:Python Matplotlib 版本代码(玫瑰曲线)
Pyplot教程:https://matplotlib.org/gallery/index.html#pyplots-examples 玫瑰曲线 文字描述 平面内,围绕某一中心点平均分布整数个正弦花瓣 ...
- OpenCV:使用OpenCV3随机森林进行统计特征多类分析
原文链接:在opencv3中的机器学习算法练习:对OCR进行分类 本文贴出的代码为自己的训练集所用,作为参考.可运行demo程序请拜访原作者. CNN作为图像识别和检测器,在分析物体结构分布的多类识别 ...
- C# 获得固定年月日
/// <summary> /// 获得固定年月日,时和分不固定 : 2019-01-01 00:00:00 /// </summary> /// <returns> ...
- 解决fixed在苹果手机抖动问题/头部底部固定布局
1.头部和底部固定,中间内容滚动,不涉及fixed 1)absolute与height:100% <!DOCTYPE html><html><head> <m ...