将分页扩展到全宽？答案

【问题标题】：Extend pagination to full width?将分页扩展到全宽？
【发布时间】：2014-01-16 01:30:04
【问题描述】：

如何将此分页扩展到全角？我在挣扎。

谢谢

这是 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>

【问题讨论】：

Extend 表示你想扩展你的 2, 3, 4 ..
对不起，我不是想扩大数字。而是将现有数字均匀分布在整个宽度上。在框之间创建空白空间。谢谢

标签： html css pagination

【解决方案1】：

在您给定的标记中，分页的子元素之间没有空格。

首先，确保子元素之间的标记中有一个空格。没有这个，text-align:justify 将无法工作。

（就像当你想证明文本时一样，除非你的单词之间有空格，否则它不会起作用！）

接下来，在分页元素之后添加一个 100% 宽度的伪元素。

Updated DEMO

..或者对于那些喜欢 FIDDLE 的人:)

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

【讨论】：

【解决方案2】：

你在找this吗？

将您的.pagination 设置为display: table;，并将您的.page 设置为table-cell。

【讨论】：

【解决方案3】：

不确定你想做什么，如果只是在中间 Anup 刚刚回答了怎么做，但是如果你想均匀地扩展所有按钮，你可以尝试使用 display: table;

http://cssdeck.com/labs/krdfmoeh

【讨论】：

【解决方案4】：

我不确定是否有自动执行此操作的方法。你可以做的是这样的：

.pagination {
    text-align:center;
}

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

从 .page 中删除填充或添加 * { box-sizing:border-box; }。

如果您希望第一个和左按钮必须在外部留有边距，请给它们“first”和“left”类并执行以下操作：

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

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

见：http://cssdeck.com/labs/yfuud0le

请注意，如果添加更多分页项，则必须手动编辑 .page div 的宽度和边距。

【讨论】：

【解决方案5】：

中心会很适合你。

.pagination {
    text-align: center;
}

【讨论】：

谢谢，但我一直在寻找它从一侧伸展到另一侧。