0

私はブートストラップを使用していますが、CSS で問題が発生しています。これは、2 番目のスパン タグで最初のスパン タグに「ブリード」または「スピル オーバー」する問題の簡単なサンプルです。

今、私はこれでテーブルを使用することはできません。それは同僚が望んでいるものではないからです (たとえそれが私がこの問題を抱えていないと確信していても)。

<div id="container" class="container-fluid">
  <div class="row-fluid">
    <div class="span12">
      <ul class="nav">
        <li class="">
          <a href="#">
            <span class="ico"><i class="icon-flag"></i></span>
            <span class="text">Login</span>
          </a>
        </li>
        <li class="">
          <a href="#">
            <span class="ico"><i class="icon-pencil"></i></span>
            <span class="testthis">
              Register your contact information, background and expertise
            </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

したがって、私が望むのは確かにテキストを折り返すことですが、「専門知識」という単語は「登録」という単語のすぐ下にある必要があり、icon-pencil」クラスの最初のスパンタグの下の左端にはなりません。

ここに画像の説明を入力

4

2 に答える 2

1

text-indentのアンカータグに指定しliてみると、思い通りの仕上がりになります。

li a {
    text-indent: -16px; /* This of course is the calculated width of span.ico */
}

デモ

より正確には、要素li内の直下のアンカーのみに影響を与えるようにします。.nav

.nav li > a {
    text-indent: -16px;
}
于 2013-07-08T04:26:59.433 に答える