同级div设置display:inline-block，父级div强制不换行

<html>

<head></head>

<body>

  <div id="container">

    <div class="lable">测试测试</div>

    <div class="lable">测试测试</div>

    <div class="lable">测试测试</div>

    <div class="lable">测试测试</div>

    <div class="lable">测试测试</div>

  <div>

</body>

<style>

  #container {

    width:400px;

    height: 200px;

    background-color: red;

    overflow: auto;

    white-space: nowrap;

  }

  .lable {

    width: 100px;

    background-color: blue;

    display: inline-block;

  }

</style>

</html>

同级div设置display:inline-block，父级div强制不换行的更多相关文章

  1. 让一个父级div根据子级div高度而自适应高度

    需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...

  2. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  3. 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...

  4. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  5. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

  6. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  7. 子级div相对于父级div位置不变

    设置父级div为相对位置 设置子级div为绝对位置 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  8. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  9. div高度不能自适应（子级使用float浮动，父级div高度不能自适应）

    1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不 ...

随机推荐

  1. git bash 报错bash: *: command not found

    默认安装的git bash某些功能是没有的,比如zip,在git bash下执行zip和unzip命令时会报错命令找不到,但值得庆幸的是,我们可以安装我们需要的命令,以下以zip命令为例,步骤如下: ...

  2. LightGBM调参总结

    1. 参数速查 使用num_leaves,因为LightGBM使用的是leaf-wise的算法,因此在调节树的复杂程度时,使用的是num_leaves而不是max_depth. 大致换算关系:num_ ...

  3. sublime使用经验汇总

    1. source insight 会对某个修改频繁的文件做多次备份.我们用sublime进行多个文件搜索时,需要把备份的文件排除在外. e:\work\code\sourcev, *.h, *.cp ...

  4. windows安装 centos

    1. 使用最新版UltraISO将ISO镜像刻录到U盘 2. U盘启动电脑进入安装界面 正常情况下你应该会看到下面的这个界面: 选择第一项,然后按TAB键(在评论区有朋友踫到没有按TAB键的提示,经d ...

  5. Jenkins自动化构建(一)执行selenium+python脚本

    Jenkins执行python写的selenium自动化脚本,通常会遇到,执行打不开浏览器,查看jenkins构建Console Output控制台输出信息,发现脚本是执行了的,但是出错了,打开浏览器 ...

  6. laravel学习历程

    1.www目录下拉下来一个laravel框架 composer create-project laravel/laravel laravelapp --prefer-dist laravelapp 为 ...

  7. 解决React Native使用Fetch API请求网络报Network request failed

    问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...

  8. C# 对数据库操作的帮助类SQLHelper.cs

    using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...

  9. Unity shader学习之屏幕后期处理效果之Bloom效果

    Bloom特效是游戏中常见的一种屏幕效果.这种特效可以模拟真实摄像机的一种图像效果,它让画面中较亮的区域“扩散”到周围的区域中,造成一种朦胧的效果. Bloom的实现原理很简单,首先根据一个阈值提取出 ...

  10. javascript（一）：javascript基本介绍及基本语法

    什么是javascript? javascript是一种直译型脚本语言,是一种动态类型.弱类型.基于原型的语言.(所谓“脚本语言”:指的是它不具有开发操作系统的能力,只是用来编写大型运用程序的脚本!) ...