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不换行 ,内容超出自动变省略号等的更多相关文章

  1. css 实现div内显示两行或三行,超出部分用省略号显示

    一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

  2. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  3. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  4. CSS布局,div居中,文字居中

    .main { width: 100%; margin: 0 auto; .banner { img { width: 100%; } } .article { margin-bottom: 100p ...

  5. css技巧之如何实现ul li边框重合

    提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合.其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很 ...

  6. DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  7. 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 ...

  8. css设置文字上下居中,一行文字居中,两行或多行文字同样居中。

    转:https://www.cnblogs.com/handsomeBoys/p/6599062.html HTML: <div class="book-detail-store-it ...

  9. html分页自适应居中;css设置分页自适应居中

    制作网页列表的分页必不可少,显示的列表条数也不一样,让我们一起来看看如何让分页标签根据给定的分页自动居中呢. 对<ul>标签设置样式为:{ display: table margin:40 ...

随机推荐

  1. JS中简单的this学习

        我在学习JS初期,在使用this的时候经常出现问题,当然就是在现在,也有一些场景不能很好的明白this到底指代的是什么?看下面一个例子:   var x = 10; var foo = { x ...

  2. Live555 分析(一):类介绍

    从程序的结构来看,live项目包括了四个基本库.程序入口类(在mediaServer中)和一些测试代码(在testProgs中). 四个基本静态库是UsageEnvironment.BasicUsag ...

  3. LDA-线性判别分析(一)

    本来是要调研 Latent Dirichlet Allocation 的那个 LDA 的, 没想到查到很多关于 Linear Discriminant Analysis 这个 LDA 的资料.初步看了 ...

  4. Node.JS + MongoDB技术浅谈

    看到一个Node.JS + MongoDB的小样例,分享给大家.魔乐科技软件学院(www.mldnjava.cn)的讲座 Node.JS + MongoDB技术讲座          云计算 +大数据 ...

  5. iOS多线程及其感悟

    感觉每天都是匆匆忙忙的,每天似乎都是时间不够用一样,可是等真的想要动手敲代码的时候才发现,原来还有好多好多的知识点不是太熟练,所以,人不可以一直感觉自我良好, 有时间就是那种自我感觉良好的心态毁了自己 ...

  6. 无法登陆mysql服务器

    解决 .#2002 无法登录 MySQL 服务器 将config.sample.inc.php复制成config.inc.php 出现这个错误,表示没有连接到数据库.修改config.inc.php文 ...

  7. NET基础课--开发工具实用功能

    1.浏览代码结构 类视图 2.重构功能 提取长的的方法体中的部分方法到单独函数中 路径:选择代码段,右击重构----提取方法 3.代码结构 a 代码对齐 点[编辑]-[高级]-[设置选定内容的格式] ...

  8. (转)SQL Server 触发器

    SQL Server 触发器 触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. Ø 什么是触发器 ...

  9. 微软TTS,Neospeech TTS 简单使用

    今天搞了下微软的TTS,逛了好多网页.博客,拼拼凑凑搞了点东西吧. 首先添加类库调用,系统自带的system.speech using System.Speech.Synthesis; 然后就能调用方 ...

  10. Xcode 中添加 .pch文件

    1  新建工程 2  创建  .pch文件 3   在setting里面进行设置: