怎么让css不自动换行代码

浮动层加margin后换行的例子:

比如说有个DIV宽度为380px,它里面有一个菜单列表,每个宽度为60px,margin-right为20px。如果就按照下面的HTML结构来做的话,那么这个菜单列表能在这个DIV里一行显示完整吗?


  1. <div> 
  2.     <div>mb5u1</div> 
  3.     <div>mb5u2</div> 
  4.     <div>mb5u3</div> 
  5.     <div>mb5u4</div> 
  6.     <div>mb5u5</div> 
  7. </div> 

5个菜单,每个宽度为60px,右边外补白为20px,因此每个菜单整体宽度是80px,5个菜单总长度为400px,而父级层宽度只有380px,根据浮动的原理,那么第5个菜单将毫无疑问的被挤下去即换行了。

看下我的解决方法:

代码如下:


  1. <div> 
  2.     <div class="overflowDiv"> 
  3.        <div>mb5u1</div> 
  4.        <div>mb5u2</div> 
  5.        <div>mb5u3</div> 
  6.        <div>mb5u4</div> 
  7.        <div>mb5u5</div> 
  8.     </div> 
  9. </div> 

 父级层宽度380px,遮罩层overflowDiv宽度设置为菜单需要的400px,overflow为hidden。因此,很自然的,遮罩层多出的20像素部分则不会显示出来。

而菜单就在这400px的宽度里为所欲为了

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索结构
代码
css自动换行代码、css换行代码、css强制换行代码、css换行代码是什么、css禁止换行代码,以便于您获取更多的相关知识。

时间: 2024-09-20 16:35:21

怎么让css不自动换行代码的相关文章

CSS禁止文本自动换行代码

在这行文字的td或div属性中,加入 代码如下: style="word-break : break-all;" 例子  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

CSS本文自动换行实现代码

我们知道如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远超出设定的大小. 在div的style中设定word-break:break-all;即可实现自动换行. 在IE浏览器中我们可以直接换行 自动换行  代码如下 复制代码 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行  代码如下 复制代码 div{ word-break:break-all; } Firefo

两栏DIV+CSS标准布局代码

一款两栏式DIV+CSS标准布局代码,详细如下: 代码如下:<html> <head> <title>Nice and Free CSS Template 1</title> <style type="text/css" media="screen"><!-- /*  body und schrift deffinitionen */ html, body{ padding:0px; margin:0

CSS控制图片代码:让网页图片自适应大小

文章简介:CSS控制图片代码:让网页图片自适应大小. 图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了.我们看下面的代码: div img { max-width:600px; width:600px; width:expression(document.body.clientWidth>600

学习网页技术CSS实现自动换行功能

css|网页 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>css#wrap{white-spa

Flex Label自动截取、自动换行代码

Flex Label经常会使用到它的自动截取.自动换行代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助   复制代码 代码如下: label.maxDisplayedLines=0; // 默认多行显示,不截取 label.maxDisplayedLines=1; //任意整数,显示单行文本,自动截取(...) label.maxDisplayedLines=2; //撑满label,可多行,显示不了的截取(...)

10个程序员最喜欢的 HTML和CSS 等在线代码编辑器

一般软件开发中必备的一样工具就是代码编辑器.传统的代码编辑器一般都是以软件安装包的形式安装到电脑里面,代码编辑保存后一般也是通过ftp或者svn等工具提交到服务器的(当然,像.NET开发中Microsoft Visual Studio这样强大的集成工具另说了.). 在 实际的项目开发中这样的方式也是挺便捷的.但是,随着各种云服务的兴起,云存储时代几乎已经是大势所趋了.个人或者小公司搭建一个类似的服务自然代价不 菲.这时候利用一些现有的在线代码编辑器,可以为你的项目进度和日常学习带来很大的帮助.特

Medium 内部使用 css/less 的代码风格指南

本文讲的是Medium 内部使用 css/less 的代码风格指南, Medium 对代码风格使用了 LESS 的一种严格子集.这个子集包含变量和混合指令,但是没有别的(嵌套等等). Medium 的常规命名改编自 SUIT CSS 框架中正在进行的工作.这就是说,它依赖于 结构化类名 和 有意义的连字符 (即不使用连字符只为了把单词分开).这用来解决目前遇到的将 CSS 应用到 DOM 上的限制和在类之间更好的交流. 目录 JavaScript Utilities(工具) u-utilityN

jsp-JSP如何让性别栏中 “男”为蓝色字 “女”为红色字 如果要用CSS的话求代码

问题描述 JSP如何让性别栏中 "男"为蓝色字 "女"为红色字 如果要用CSS的话求代码 这个是表格的代码 out.print("" "");out.print("" ""+""序号""+"" "");out.print("" ""+""姓名&quo