將分頁延伸至全寬？

如何將這個分頁擴展爲全寬？我正在掙扎。將分頁延伸至全寬？

感謝

這是CSS代碼：

.pagination { 
    text-align: justify; 
    background: #f2f2f2; 
    padding: 20px; 
    margin-bottom: 20px; 
} 

    .page { 
    display: inline-block; 
    padding: 0px 9px; 
    margin-right: 3px; 
    border-radius: 3px; 
    border: solid 1px #c0c0c0; 
    background: #e9e9e9; 
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1); 
    font-size: .875em; 
    font-weight: bold; 
    text-decoration: none; 
    color: #717171; 
    text-shadow: 0px 1px 0px rgba(255,255,255, 1); 
} 

    .page:hover, .page.gradient:hover { 
    background: #fefefe; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0)); 
    background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0); 
} 

    .page.active { 
    border: none; 
    background: #616161; 
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8); 
    color: #f0f0f0; 
    text-shadow: 0px 0px 3px rgba(0,0,0, .5); 
} 

    .page.gradient { 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9)); 
    background: -moz-linear-gradient(0% 0% 270deg,#f8f8f8, #e9e9e9); 
}

的HTML部分來自於這裏

<div class="pagination"> 
    <p>How can I extend (justify) this pagination to the full width of the div "pagination"?</p> 
    <a href="#" class="page gradient">first</a><a href= 
    "#" class="page gradient">2</a><a href="#" class= 
    "page gradient">3</a><span class= 
    "page active">4</span><a href="#" class= 
    "page gradient">5</a><a href="#" class= 
    "page gradient">6</a><a href="#" class= 
    "page gradient">last</a> 
</div>

來源

2014-01-15 Marcus Silverman

擴展意味着你要擴大你的2，3，4 .. – Anup

對不起，我不是故意擴大數量。而是將現有的數字均勻分佈在整個寬度上。在框之間創建空白空間。謝謝 –

中心會顯得好看你。

.pagination { 
    text-align: center; 
}

來源

2014-01-15 12:43:57 Anup

謝謝，但我一直在尋找它從一邊延伸到另一邊。 –

你是不是爲this？

將您的.pagination設置爲display: table;，將它們設置爲.page至table-cell。

來源

2014-01-15 12:44:28 fiskolin

不確定你想要做什麼，如果只在中間居中，Anup只是回答瞭如何，但如果你想均勻地擴展所有的按鈕，你可以嘗試使用display：table;

http://cssdeck.com/labs/krdfmoeh

來源

2014-01-15 12:45:08

我不知道是否有這樣做的自動方式。你可以做的是這樣的：

.pagination { 
    text-align:center; 
} 

.page { 
    width:6%; 
    margin:0 3.9%; 
}

從.page中刪除填充或添加* {box-sizing：border-box; }。

如果你想在第一和左按鈕都在外面保證金，給他們「第一」和「左」的班，做：

.page { 
    width:6%; 
    margin:0 4.5%; 
} 

.page.first { margin-left:0; } 
.page.last { margin-right:0; }

參見：http://cssdeck.com/labs/yfuud0le

注意，如果您添加更多分頁項目，您必須手動編輯.page div的寬度和邊距。

來源

2014-01-15 12:47:23 Leon

在您給定的標記中，分頁的子元素在它們之間沒有空白。

所以首先，確保子元素之間的標記中有空白。沒有這個，text-align:justify將無法正常工作。

（當你想證明文字，就像，它不會工作，除非你有你的單詞之間的空格！）

接下來，用100％的寬度拼版元素後添加一個僞元素。

Updated DEMO

..或爲那些喜歡誰FIDDLE :)

.pagination:after 
{ 
    content: ''; 
    width: 100%; 
    display: inline-block; 
}

來源

2014-01-15 12:55:51 Danield

將分頁延伸至全寬？

回答

相關問題