1

事情是这样的，我想让文本“不太可能”坚持数字 1，而文本“很可能”坚持最后一个数字。因此，如果我只有 6 个数字，按钮将居中对齐，文本将跟随第一个和最后一个按钮。我怎么能只用css做到这一点？

按钮率

到目前为止，我有这样的代码

HTML 结构

<div class="module-block">
    <div class="num-block">
    <ul>
        <li><a href="javascript:void(0);">1</a></li>
        <li><a href="javascript:void(0);">2</a></li>
        <li><a href="javascript:void(0);">3</a></li>
        <li><a href="javascript:void(0);">4</a></li>
        <li><a href="javascript:void(0);">5</a></li>
        <li><a href="javascript:void(0);">6</a></li>
        <li><a href="javascript:void(0);">7</a></li>
        <li><a href="javascript:void(0);">8</a></li>
        <li><a href="javascript:void(0);">9</a></li>
        <li><a href="javascript:void(0);">10</a></li>
    </ul>
    </div>
    <div style="clear:both;">
        <span style="color:#ffffff; float:left;">not at all likely</span>
        <span style="color:#ffffff; float:right;" class="right">very likely</span>
    </div>
</div>

这是CSS代码：

    ul { margin: 0; padding: 0; text-align: center;}
    li { margin:0 1px 0 0; display: inline-block; list-style: none;}
    a { display: inline-block; width: 33px; background-color: #E61968; color: #ffffff; font-size: 16px; font-weight: 600; line-height: 33px; text-align: center; text-decoration: none;}
    .module-block { width: 390px;}

这是 jsfiddle 链接：http: //jsfiddle.net/d433j/

4

1 回答 1

3

将它们放在包含数字的 div 中：

<div class="module-block">
  <div class="num-block">
    <ul>
      <li><a href="javascript:void(0);">1</a></li>
      <li><a href="javascript:void(0);">2</a></li>
      <li><a href="javascript:void(0);">3</a></li>
      <li><a href="javascript:void(0);">4</a></li>
      <li><a href="javascript:void(0);">5</a></li>
      <li><a href="javascript:void(0);">6</a></li>
    </ul>
        <span style="float:left;">not at all likely</span>
        <span style="float:right;" class="right">very likely</span>
  </div>
</div>​

还要更改CSS，删除居中对齐ul（如果要使块居中还有其他方法）。这里的关键是浮动块（并删除它的宽度！），这样下面的标题将适合块。

CSS：（我在外部块上放置了一个边框并删除了一些数字以表明它适用于更少/不同的数字）

ul { margin: 0; padding: 0; text-align: left;}
li { margin:0 1px 0 0; display: inline-block; list-style: none;}
a { display: inline-block; width: 33px; background-color: #E61968;    color: #fff; font-size: 16px; font-weight: 600; line-height: 33px; text-align: center; text-decoration: none;}
.module-block {width: auto; border: 1px blue solid; float: left;}

示例：http: //jsfiddle.net/d433j/2/

编辑：

如果您想使块居中，并且不知道外部块的宽度，只需将外部块显示设置为inline-block，为其添加位置并添加到数字块。此外，将 添加overflow: hidden到 numbers 块以使其包含标题：

新的 CSS：

ul { margin: 0; padding: 0; text-align: left;}
li { margin:0 1px 0 0; display: inline-block; list-style: none;}
a { display: inline-block; width: 33px; background-color: #E61968;    color: #fff; font-size: 16px; font-weight: 600; line-height: 33px; text-align: center; text-decoration: none;}
.module-block {display:inline-block;
    position:relative;
    left:50%;}
.num-block {width: auto; border: 1px blue solid; position:relative;
    left:-50%; height: auto; overflow: hidden;}

示例：http: //jsfiddle.net/d433j/3/

于 2012-11-27T09:41:52.837 回答