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て、キャプションをラップします。

新しい 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 に答える