CSS之文字框樣式和水平居中

阿新 • • 發佈：2022-03-14

1 CSS使用
- 1.1 文字框樣式
- 1.2 按鈕和框樣式
2 六種實現元素水平居中
- 2.1 引言
- 2.2 各個不同方式居中

1 CSS使用

1.1 文字框樣式

1.1.1 滑鼠一上去變成淺綠色

<html>
<head>
<title>css-文字框</title>
<style type="text/css">
<!--
.box1,.box2 { width:144px; height:22px; line-height:22px; border:1px solid #A9BAC9;background:url
(http://cn.yimg.com/i/mail/06/bg_box1.gif) no-repeat #fff; padding:0 3px; font-size:12px; }
.box2 { border:1px solid #9ECC00;}
-->
</style>
</head>
<body>
<INPUT class=box1 id=login
onmouseover="this.className='box2'" onMouseOut="this.className='box1'"
name=login>
</body>
</html>

1.1.2 文字框提示樣式，滑鼠點選獲得焦點時提示內容消失

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字框提示樣式</title>
<style type="text/css">
<!--
.a1 {
color: #CCCCCC;
}
.a2 {
color: #000;
}
-->
</style>
</head>
<body>
<input name="n" type="text"/>
<input name="n1" type="text"/>
<script language="javascript">
window.onload=function(){
s('n','Your message1');s('n1','Your message2')
}
function g(a){return document.getElementByIdx_x(a)}
function s(n,v){
with(g(n)){
className='a1';value=v;
onfocus=function(){if(value==v)value='';className='a2'}
onblur=function(){if(value==''){value=v;className='a1'}}
}
}
</script>
</body>
</html>

1.1.3 input文字框樣式

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建網頁 1</title>
<style>
<!--
.username { width:130px; background:#FFFFFF url("/article/upimages/ico_username.gif") 2px 2px no-repeat; padding-
left:18px;BORDER-RIGHT: #E7AD01 1px solid; BORDER-TOP: #E7AD01 1px solid; FONT-SIZE: 13px; BORDER-LEFT: #E7AD01
1px solid; COLOR: #000000; BORDER-BOTTOM: #E7AD01 1px solid; HEIGHT: 20px }
-->
</style>
</head>
<body>
<table cellSpacing="0" cellPadding="0" width="100%" border="0" id="table1">
<tr>
   <form name="myform" method="post" action="">
    <td class="login_td">使用者名稱：<input class="username"
onmouseover="this.style.borderColor='#99E300'" onmouseout="this.style.borderColor='#A1BCA3'" maxLength="12"
name="UserName"></td>
   </form>
</tr>
</table>
</body>
</html>

1.1.4 只有下劃線的文字框

<input style="border:0;border-bottom:1 solid black;background:;">

1.1.5 軟體序列號式的輸入框

<script for="T" event="onkeyup">
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">

軟體序列號式的輸入框(完整版)：

<script for="T" event="onkeyup">
if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();
</script>
<script for="T" event="onfocus">select();</script>
<script for="Submit" event="onclick">
var sn=new Array();
for(i=0;i<T.length;i++)
sn=T.value;
alert(sn.join("—"));
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">
<input type="submit" name="Submit">

1.1.6 輸入框景背景透明

<input style="background:transparent;border:1px solid #ffffff">

1.1.7 滑鼠劃過輸入框，輸入框背景色變色

<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" 
style="border-width:1px;border-color=black">

1.1.8 輸入字時輸入框邊框閃爍(邊框為小方型)

<Script Language="JavaScript">
function borderColor(){
if(self['oText'].style.borderColor=='red'){
self['oText'].style.borderColor = 'yellow';
}else{
self['oText'].style.borderColor = 'red';
}
oTime = setTimeout('borderColor()',400);
}
</Script>
<input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">

1.1.9 輸入字時輸入框邊框閃爍(邊框為虛線)

<style>
#oText{border:1px dotted #ff0000;ryo:expression_r(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
</style>
<input type="text" id="oText">

1.1.10 自動橫向廷伸的輸入框

<input type="text" style="huerreson:expression_r(this.width=this.scrollWidth)" value="abcdefghijk">

1.1.11 自動向下廷伸的文字框

<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">輸入幾個回車試試</textarea>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字框輸入提示</title>
<style type="text/css">...
<!--
.keyword {...}{width:150px; height:20px; border:#0066FF 1px solid;}
#keytishi {...}{width:150px; height:auto; border:#0066FF 1px solid; position:absolute; display:none;}
#keytishi ul {...}{ margin:0;}
#keytishi ul li{...}{margin:0;list-style-type:none; line-height:16px; height:16px; font-size:12px; padding:2px;}
#keytishi ul li a {...}{display:block; width:150px; height:16px; text-decoration:none;}
#keytishi ul li a:hover {...}{background-color:#0099FF;}
-->
</style>
<script type="text/javascript">...
<!--
//建立XMLHttpRequest物件
var xmlhttp;
try...{
    xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e)...{
     try...{
        xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
     }catch(e)...{
         try...{
            xmlhttp= new XMLHttpRequest();
         }catch(e)...{}
     }
}
function getKeyWord()...{
     var obj = document.getElementById("search");//獲取文字域物件
     if(obj.value=="")...{
         return;
     }
     var top=0;
     var left=0;
     while(obj)...{//此迴圈得到檔案域物件在頁面中的絕對位置
         top += obj["offsetTop"];
         left += obj["offsetLeft"];
        objobj = obj.offsetParent;
     }
     xmlhttp.open("get","input.asp?keyword="+document.getElementByIdx_x("search").value,true);
    xmlhttp.onreadystatechange = function()...{
         if(xmlhttp.readyState == 4)
         ...{
             if(xmlhttp.status == 200)
             ...{
                 if(xmlhttp.responseText!="")...{
                     document.getElementByIdx_x("keytishi").innerHTML =(xmlhttp.responseText);//把後臺返回的資料填充到提示層
                     document.getElementByIdx_x("keytishi").style.left = left + "px";//設定提示層的位置,左
                     document.getElementByIdx_x("keytishi").style.top = (top + 25) + "px";//設定提示層的位置,上
                     document.getElementByIdx_x("keytishi").style.display ="block";//設定提示層可見
                 }else...{
                     document.getElementByIdx_x("keytishi").innerHTML = "";//清空提示層
                     document.getElementByIdx_x("keytishi").style.display ="none";//設定提示層不可見
                 }
             }
             else...{
            
             }
         }
     }
     xmlhttp.setRequestHeader("If-Modified-Since","0");
     xmlhttp.send(null);
}
function input(str)...{
     document.getElementByIdx_x("search").value=str;//從提示層選擇你需要的資料填充到文字框
     document.getElementByIdx_x("keytishi").innerHTML = "";//清空提示層
     document.getElementByIdx_x("keytishi").style.display = "none";//設定提示層不可見
}
//-->
</script>
</head>
<body>
<input type="text" class="keyword" id="search" name="search"onkeyup="getKeyWord();" onclick="getKeyWord();" />
<div id="keytishi"></div><!--提示層-->
</body>
</html>

後臺檔案 [input.asp]

<%...@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="conn.asp"-->
<%...
     dim rs
     dim sql
    
     dim keyWords
    
    keyWrods = Request("keyword")
    
     Set rs = Server.CreateObject("ADODB.Recordset")
    sql = "select * from king_test where keyword like '%"&keyWrods&"%'"
     rs.open sql,conn,1,1
     if not (rs.bof and rs.eof) then
     Response.Write("<ul>")
     do while not rs.eof
%>
<li><a href="javascript:void(null);"onclick="input('<%Response.Write(escape(rs("keyword")))%>');"><%...Response.Write(escape(rs("keyword")))%></a></li>
<%...
     rs.movenext
     loop
     Response.Write("<ul>")
     end if
     rs.close
     set rs = nothing
     conn.close
     Set conn = nothing
%>

.buttoncss {
     font-family: "tahoma", "宋體";
     font-size:9pt; color: #003399;
     border: 1px #003399 solid;
     color:#006699;
     border-bottom: #93bee2 1px solid;
     border-left: #93bee2 1px solid;
     border-right: #93bee2 1px solid;
     border-top: #93bee2 1px solid;
     background-image:url(../images/bluebuttonbg.gif);
     background-color: #e8f4ff;
     cursor: hand;
     font-style: normal ;
     width:60px;
     height:22px;
}

1.2 按鈕和框樣式

1.2.1 藍色按鈕

.bluebuttoncss {
     font-family: "tahoma", "宋體";
     font-size: 9pt; color: #003366;
     border: 0px #93bee2 solid;
     border-bottom: #93bee2 1px solid;
     border-left: #93bee2 1px solid;
     border-right: #93bee2 1px solid;
     border-top: #93bee2 1px solid;*/
     background-image:url(../images/blue_button_bg.gif);
     background-color: #ffffff;
     cursor: hand;
     font-style: normal ;
}

1.2.2 紅色按鈕

.redbuttoncss {
     font-family: "tahoma", "宋體";
     font-size: 9pt; color: #0066cc;
     border: 1px #93bee2 solid;
     border-bottom: #93bee2 1px solid;
     border-left: #93bee2 1px solid;
     border-right: #93bee2 1px solid;
     border-top: #93bee2 1px solid;
     background-image:url(../images/redbuttonbg.gif);
     background-color: #ffffff;
     cursor: hand;
     font-style: normal ;
}

1.2.3 選擇按鈕

.selectbuttoncss{
     font-family: "tahoma", "宋體";
     font-size: 9pt; color: #0066cc;
     border: 1px #93bee2 solid;
     border-bottom: #93bee2 1px solid;
     border-left: #93bee2 1px solid;
     border-right: #93bee2 1px solid;
     border-top: #93bee2 1px solid;
     background-image:url(../images/blue_button_bg.gif);
     background-color: #ffffff;
     cursor: hand;
     font-style: normal ;
}

1.2.4 綠色按鈕

.greenbuttoncss {
     font-family: "tahoma", "宋體";
     font-size: 9pt; color: #0066cc;
     border: 1px #93bee2 solid;
     border-bottom: #93bee2 1px solid;
     border-left: #93bee2 1px solid;
     border-right: #93bee2 1px solid;
     border-top: #93bee2 1px solid;
     background-image:url(../images/greenbuttonbg.gif);
     background-color: #ffffff;
     cursor: hand;
     font-style: normal ;
}

1.2.5 影象按鈕

.imagebutton{
     cursor: hand;    
}

cursor: hand和cursor:hand都是手型的游標，但是還是有一丟丟的區別。
cursor:hand IE完全支援，但是在Firefox是不支援的，木有效果。
cursor:pointer 是CSS2.0的標準，所以Firefox是支援的，但是IE5.0及之前的版本不支援。IE6開始支援。

1.2.6 頁面正文

body {
     scrollbar-face-color: #ededf3;
     scrollbar-highlight-color: #ffffff;
     scrollbar-shadow-color: #93949f;
     scrollbar-3dlight-color: #ededf3;
     scrollbar-arrow-color: #082468;
     scrollbar-track-color: #f7f7f9;
     scrollbar-darkshadow-color: #ededf3;
     font-size: 9pt;
     color: #003366;
     overflow:auto;
}

td { font-size: 12px }
th {
     font-size: 12px;
}

1.2.7 下拉選擇框

select{
     border-right: #000000 1px solid;
     border-top: #ffffff 1px solid;
     font-size: 12px;
     border-left: #ffffff 1px solid;
     color:#003366;
     border-bottom: #000000 1px solid;
     background-color: #f4f4f4;
}

1.2.8 線條文字編輯框

.editbox{
     background: #ffffff;
     border: 1px solid #b7b7b7;
     color: #003366;
     cursor: text;
     font-family: "arial";
     font-size: 9pt;
     height: 18px;
     padding: 1px;
}

1.2.9 多行文字框

.multieditbox{
     background: #f8f8f8;
     border-bottom: #b7b7b7 1px solid;
     border-left: #b7b7b7 1px solid;
     border-right: #b7b7b7 1px solid;
     border-top: #b7b7b7 1px solid;
     color: #000000;
     cursor: text;
     font-family: "arial";
     font-size: 9pt;
     padding: 1px;
}

1.2.10 陰影風格的表單

.shadow {
     position:absolute;
     z-index:1000;
     top:0px;
     left:0px;
     background:gray;
     background-color:#ffcc00;
     filter : progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true);
}

1.2.11 只顯一條橫線的輸入框

.logintxt{
     border-right: #ffffff 0px solid;
     border-top: #ffffff 0px solid;
     font-size: 9pt;
     border-left: #ffffff 0px solid;
     border-bottom: #c0c0c0 1px solid;
     background-color: #ffffff
}

1.2.12 沒有邊框的輸入框

.noneinput{
     text-align:center;
     width:99%;height:99%;
     border-top-style: none;
     border-right-style: none;
     border-left-style: none;
     background-color: #f6f6f6;
     border-bottom-style: none;
     }

2 六種實現元素水平居中

2.1 引言

水平居中的實現方案，大家最熟悉的莫過開給元素定一個顯示式的寬度，然後加上margin的左右值為auto。如：

.center {
        width: 960px;
        margin-left: auto;
        margin-right: auto;}

這種方法給知道了寬度的元素設定居中是最方便不過的了，但有很多情況之下，我們是無法確定元素容器的寬度。換句話說，未有明確寬度的時候，上面的方法無法讓我們實現元素水平居中。那要怎麼辦呢？這也就是我們今天需要討論的問題。
為了更好的說明問題，我們來看一個製作分頁效果的程式碼：

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul></di

給分頁加上樣式：

.pagination li {
  line-height: 25px;}.pagination a {
  display: block;
  color: #f2f2f2;
  text-shadow: 1px 0 0 #101011;
  padding: 0 10px;
  border-radius: 2px;
  box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
  background: linear-gradient(top,#434345,#2f3032);}.pagination a:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
  background: linear-gradient(top,#f48b03,#c87100);}

這是一個極普通的樣式程式碼，初步的效果：

這很顯然不是我們需要的效果，接下來我們分幾種方案來製作：

2.2 各個不同方式居中

2.2.1 margin和width實現水平居中

第一種方法是最古老的實現方案，也是大家最常見的方案，在分頁容器上定義一個寬度，然後配合margin的左右值為auto實現效果：

.pagination {
  width: 293px;
  margin-left: auto;
  margin-right: auto;}.pagination li {
  line-height: 25px;display: inline;
  float: left;
  margin: 0 5px;}.pagination a {
  display: block;
  color: #f2f2f2;
  text-shadow: 1px 0 0 #101011;
  padding: 0 10px;
  border-radius: 2px;
  box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
  background: linear-gradient(top,#434345,#2f3032);}.pagination a:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
  background: linear-gradient(top,#f48b03,#c87100);}

程式碼中綠色部分是為了實現分頁居中效果而新增的程式碼。（下文中沒有特殊宣告，綠色部分程式碼表示新增加的程式碼。），先來看看效果：

效果是讓我們實現了，但其擴充套件性那就不一定強了。示例中只顯示了五頁和向前向後的七個顯項，但往往我們很多情況下是不知道會有多少個分頁項顯示出來，而且也無法確定每個分頁選項的寬度是多少，也就無法確認容器的寬度。
優點：實現方法簡單易懂，瀏覽器相容性強；
缺點：擴充套件性差，無法自適應未知項情況。

2.2.2 inline-block實現水平居中方法

inline-block屬性是無法讓元素水平居中，關鍵之處要在元素的父容器中設定text-align的屬性為center，這樣才能達到效果：

.pagination {
  text-align: center;
  font-size: 0;
  letter-spacing: -4px;
  word-spacing: -4px;}.pagination li {
  line-height: 25px;
  margin: 0 5px;display: inline-block;
  *display: inline;
  zoom:1;
  letter-spacing: normal;  
  word-spacing: normal;
  font-size: 12px;}.pagination a {
  display: block;
  color: #f2f2f2;
  text-shadow: 1px 0 0 #101011;
  padding: 0 10px;
  border-radius: 2px;
  box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
  background: linear-gradient(top,#434345,#2f3032);}.pagination a:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
  background: linear-gradient(top,#f48b03,#c87100);}

效果如下：

這個方法相對來說也是簡單易懂，但使用了inline-block解決了水平居中的問題
做點：簡單易懂，擴充套件性強；
缺點：需要額外處理inline-block的瀏覽器相容性。

2.2.3 浮動實現水平居中的方法

剛看到標題，大家可能會感到很意外，元素都浮動了，他還能水平居中？大家都知道，浮動要麼靠左、要麼靠右，還真少見有居中的。其實略加處理就有了。

.pagination {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;}.pagination ul {
  clear: left;
  float: left;
  position: relative;
  left: 50%;/*整個分頁向右邊移動寬度的50%*/
  text-align: center;}.pagination li {
  line-height: 25px;
  margin: 0 5px;
  display: block;
  float: left;
  position: relative;
  right: 50%;/*將每個分頁項向左邊移動寬度的50%*/}.pagination a {
  display: block;
  color: #f2f2f2;
  text-shadow: 1px 0 0 #101011;
  padding: 0 10px;
  border-radius: 2px;
  box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
  background: linear-gradient(top,#434345,#2f3032);}.pagination a:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
  background: linear-gradient(top,#f48b03,#c87100);}

效果如下所示：

這種方法實現和前面的與眾不同，使用了浮動配合position定位實現。下面簡單的介紹了一下這種方法實現原理。
大家都知道div是一個塊元素，其預設的寬度就是100%，如圖所示：

如果div設定了浮動之後，他的內容有多寬度就會撐開有多大的容器（除顯式設定元素寬度值之外），這也是我們實現讓分頁導航居中的關鍵所在：

接下來使用傳統的製作方法，我們會讓導航浮動到左邊，而且每個分頁項也進行浮動，就如下圖所示一樣：

現在要想的辦法是讓分頁導航居中的效果了，在這裡是通過position:relative屬性實現，首先在列表項“ul”上向右移動50%（left:50%;），看到如下圖所示：

如上圖所示一樣，整個分頁向右移動了50%的距離，緊接著我們在li上也定義position:relative屬性，但其移動的方向和列表“ul”移動的方向剛好是反方向，而其移動的值保持一致：

這樣一來就實現了float浮動居中的效果。

優點：相容性強，擴充套件性強；
缺點：實現原理較複雜。

2.2.4 絕對定位實現水平居中

絕對定位實現水平居中，我想大家也非常的熟悉了，並且用得一定不少，早期是這樣使用的：

.ele {
        position: absolute;
        width: 寬度值;
        left: 50%;
        margin-left: -(寬度值/2);}

但這種實現我們有一個難題，我並不知道元素的寬度是多少，這樣也就存在如方法一所說的難題，但我們可以藉助方法三做一點變通：

.pagination {
  position: relative;}.pagination ul {
  position: absolute;
  left: 50%;}.pagination li {
  line-height: 25px;
  margin: 0 5px;
 float: left;
  position: relative;/*注意，這裡不能是absolute，大家懂的*/
  right: 50%;}.pagination a {
  display: block;
  color: #f2f2f2;
  text-shadow: 1px 0 0 #101011;
  padding: 0 10px;
  border-radius: 2px;
  box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
  background: linear-gradient(top,#434345,#2f3032);}.pagination a:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
  background: linear-gradient(top,#f48b03,#c87100);}

優點：擴充套件性強，相容性強;
缺點：理解性難。

2.2.5 CSS3的flex實現水平居中方法

CSS3的flex是一個很強大的功能，她能讓我們的佈局變得更加靈活與方便，唯一的就是目前瀏覽器的相容性較差。那麼第五種方法，我們就使用flex來實現

.pagination {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  display: box;
  box-orient: horizontal;
  box-pack: center;}.pagination li {
  line-height: 25px;
  margin: 0 5px;float: left;}.pagination a {
  display: block;
  color: #f2f2f2;
  text-shadow: 1px 0 0 #101011;
  padding: 0 10px;
  border-radius: 2px;
  box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
  background: linear-gradient(top,#434345,#2f3032);}.pagination a:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
  background: linear-gradient(top,#f48b03,#c87100);}

優點：實現便捷，擴充套件性強
缺點：相容性差。

2.2.6 CSS3的fit-content實現水平居中方法

fit-content是CSS中給width屬性新加的一個屬性值，配合margin可以讓我輕鬆的實現水平居中的效果：

.pagination ul {
  width: -moz-fit-content;
  width:-webkit-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;}.pagination li {
  line-height: 25px;
  margin: 0 5px;float: left;}.pagination a {
  display: block;
  color: #f2f2f2;
  text-shadow: 1px 0 0 #101011;
  padding: 0 10px;
  border-radius: 2px;
  box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
  background: linear-gradient(top,#434345,#2f3032);}.pagination a:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
  background: linear-gradient(top,#f48b03,#c87100);}

優點：簡單易懂，擴充套件性強;
缺點：瀏覽器相容性差