几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等
1 div在页面居中的问题
1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即可。
2)position值为relative时(绝对定位),css设置属性 text-align:center; left:50%; margin-left:-500px;(左边距margin-left设置为当前div宽度的一半的负值即可).
代码示例:
.page {
position:absolute;
width:1000px;
background-image:none;
text-align:center;
left:%;
margin-left:-500px;
}
css负值结合z-index能实现一些很不错的东西,但是负值使用始终存在很大的隐患尤其在页面内容赋值时。
2 ul li 所有元素排列在一行的方式及其它
ul作为我们最常用的列表元素,有时候我们想要让它下面的li都放置在同一行,
1) 设置ul的list-style-type:none;(一般默认每列前面有黑圆点的,设置列表的格式为none,即可去掉每列前的圆点或方块。)
2) 设置ul 和 li 的float:left;(左浮动,即每个元素从左至右单行排列)
代码示例:
.tableclass ul
{
float: left;
height: 50px;
left:30px;
line-height: 50px;
position: absolute;
list-style-type:none;
}
.tableclass ul li
{
float:left;
width:100px;
}
3 div内容太多,我们有时会需要将超出部分省略,也很简单
1) 设置div的white-space: nowrap;(设置div内容不换行,保证一直在一行)
2) 设置div的overflow: hidden;(超出div的内容不显示)
3) 设置div的text-overflow: ellipsis;(当文本溢出时的属性,ellipsis表示省略符号来代表被修剪的文本。)
代码示例:
.videoname
{
position:absolute;
left:25px;
height:48px;
width:160px;
top:5px;
font-size:15px;
font-family: Arial;
line-height:45px;
text-align:left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等的更多相关文章
- css 实现div内显示两行或三行,超出部分用省略号显示
一.div内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二.div内显示 ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
- CSS布局,div居中,文字居中
.main { width: 100%; margin: 0 auto; .banner { img { width: 100%; } } .article { margin-bottom: 100p ...
- css技巧之如何实现ul li边框重合
提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合.其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很 ...
- DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)
如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...
- Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]
最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-po ...
- css设置文字上下居中,一行文字居中,两行或多行文字同样居中。
转:https://www.cnblogs.com/handsomeBoys/p/6599062.html HTML: <div class="book-detail-store-it ...
- html分页自适应居中;css设置分页自适应居中
制作网页列表的分页必不可少,显示的列表条数也不一样,让我们一起来看看如何让分页标签根据给定的分页自动居中呢. 对<ul>标签设置样式为:{ display: table margin:40 ...
随机推荐
- Android 开发笔记-Eclipse中文乱码
使用eclipse时经常中文乱码网上搜罗了下解决办法: 使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题,Eclipse提供了灵活的设置文件编码格式的选项,我们可以通过设置 ...
- pyqt说明
我是个PHP程序员,不过有时候觉得需要写些小软件,对于我这种不太熟悉桌面软件开发的人来说,界面问题最让我头痛.听说Qt很强大,而且是跨平台,所以决定学习它用来弥补我写桌面软件的不足. Qt一般是通过C ...
- iOS获取一个方法的执行时间
#import <Foundation/Foundation.h> #import <mach/mach_time.h> typedef void (^block)(void) ...
- DM6437 dsp系列之启动过程全析(2)—AIS文件解析
本文均属自己阅读源码的点滴总结,转账请注明出处谢谢. 欢迎和大家交流.qq:1037701636 email: gzzaigcn2009@163.com,gzzaigcn2012@gmail.com ...
- Android应用程序内部启动Activity过程(startActivity)的源代码分析
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6703247 上文介绍了Android应用程序的 ...
- 2013年全球ERP市场格局(Gartner)
Gartner于5月5日公布了全球ERP市场的分析报告,报告称全球ERP软件销售额2013年整体增长了3.8%(从2012年$244亿美元到2013年$258亿美元),全球前五位ERP厂商座次例如以下 ...
- PHP获取中英文混合字符串长度及截取
1.字符串长度 PHP获取中英文混合字符串长度的实现代码如下,1中文=1位,2英文=1位,可自行修改 /** * PHP获取字符串中英文混合长度 * @param $str string 字符串 * ...
- DotDensityRenderer
关键之处在于获取每个点所代表的的值 这里使用geodatabase类库中idatastatistic接口进行统计字段,再将结果传递给esrisysytem.istatisticsResult进行. 需 ...
- Android Service(下)
转载请注册出处:http://blog.csdn.net/guolin_blog/article/details/9797169 在上一篇文章中,我们学习了Android Service相关的许多重要 ...
- DevExpress gridcontrol添加了复选框删除选中的多行/批量删除的方法
思路:遍历gridView1的每一行,该行中checkbox列被勾选则设置该行为选中状态,执行gridView1提供的DeleteSelectedRows方法则可 public void DoDele ...