将元素粘贴到宽度灵活的div上方

Question

这就是事情，我想让'不太可能'的文字坚持到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/

Answer 1

将它们放在包含数字的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添加到数字块以使其包含字幕：

新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/