一个div宽度不固定的左右居中效果
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
border:0;
outline:0;
margin:0;
padding:0;
}
.PageNav{
float:left;
width:100%;
padding:20px 0px;
}
.pagination {
height: 36px;
margin: 18px 0;
}
.pagination ul {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
margin-left: 0;
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
background:#f8f8f8;
}
.pagination li {
display: inline;
}
.pagination a {
float: left;
padding: 0 14px;
line-height: 34px;
text-decoration: none;
border: 1px solid #ddd;
border-left-width: 0;
color:#666;
font-size:14px;
font-family:"黑体";
}
.pagination a:hover,
.pagination .active a {
background-color: #efefef;
}
.pagination .active a {
color: #004ea2;
cursor: default;
}
.pagination .disabled span,
.pagination .disabled a,
.pagination a:hover,
.pagination .disabled a:hover {
color: #004ea2;
background-color: transparent;
cursor: default;
}
.pagination li:first-child a {
border-left-width: 1px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.pagination li:last-child a {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.pagination-centered {
text-align: center;
}
html:
<div class="PageNav">
<div class="pagination pagination-centered">
<ul>
<li><a href="#">上一页</a></li>
<li class="active">
<a href="#">1</a>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">...</a></li>
<li><a href="#">7</a></li>
<li><a href="#">下一页</a></li>
</ul>
</div>
</div>
一个div宽度不固定的左右居中效果的更多相关文章
- 实现一个div,左边固定div宽度200px,右边div自适应
实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...
- 如何让一个DIV水平,垂直方向都居中于浏览器?
<style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px ...
- 父级div宽度100%,子级一个div宽度固定,另一个宽度自适应
<!DOCTYPE html> <html> <head> <title>布局测试</title> <style type=" ...
- css里设置一个div在顶部固定,不随滚动条滚动而滚动
<div style="border:1px solid red;position:fixed;top:0px;float:inherit;width:100%">删除 ...
- 用伪类实现一个div的宽度和高度是固定百分比
遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用 ...
- css实现高度或者宽度不固定的div元素垂直左右居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 设置一个DIV块固定在屏幕中央(两种方法)
设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0p ...
- CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
随机推荐
- sed备忘
sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的内容送 ...
- javascript 1.5s跳转
<script type="text/javascript"> var t = 1.5; window.onload=countDown; function count ...
- 对threading模块源码文件的解读(不全)
# -*- coding: utf-8 -*- #python 27 #xiaodeng #对threading模块源码文件的解读(不全) import threading #类 #Thread() ...
- 搭建Hexo博客并部署到Github
参考: http://www.jianshu.com/p/a67792d93682 http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d. ...
- spring注解 di 和 ioc 注解
注解: 1.注解就是为了说明java中的某一个部分的作用(Type) 2.注解都可以用于哪个部门是@Target注解起的作用 3.注解可以标注在ElementType枚举类所指定的位置上 4. @Do ...
- CoreData 增删改查
#pragma mark - Core Data Methods - (void)insertObjectWithFileName:(NSString *)fileName { /** SQL新增记录 ...
- HDU 1757 A Simple Math Problem (矩阵乘法)
A Simple Math Problem Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- Linux中断 - 驱动申请中断API
一.前言 本文主要的议题是作为一个普通的驱动工程师,在撰写自己负责的驱动的时候,如何向Linux Kernel中的中断子系统注册中断处理函数?为了理解注册中断的接口,必须了解一些中断线程化(threa ...
- List 集合remove问题
java的list集合中.使用remove删除元素: 方法一: static List<Integer> list3 = new ArrayList<Integer>(); s ...
- Python isnumeric() 方法
描述 Python isnumeric() 方法检测字符串是否只由数字组成.这种方法是只针对unicode对象. 注:定义一个字符串为Unicode,只需要在字符串前添加 'u' 前缀即可,具体可以查 ...