将文本对齐而不会渗入另一个span标记

Question

我使用bootstrap，我的CSS给了我一些问题。这是一个简单的问题示例，我遇到了第二个span标记，导致它出现了＃34; bleed＆＃34;或＆＃34;溢出＆＃34;进入第一个span标签。

现在，我不能使用这个表，因为那不是同事想要的（尽管这肯定是我肯定没有这个问题）。

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

所以我想要的当然是包装文字，但是＆＃34;专业知识＆＃34;应该（需要）直接在＃34;注册＆＃34;并且不会在第一个span标签下面的最左边用图标铅笔＆＃34;班级

Answer 1

以下是fiddle link让我们检查它是否适合您。

.nav {
    background-color:#FFFFFF;
    border-top:1px solid #E1E1E1;
    border-left:1px solid #E1E1E1;
    border-right:1px solid #E1E1E1;

    }
.nav li {
    overflow:hidden;
    height:100%;
    list-style-type:disc outside !important;
    border-bottom:1px solid #E1E1E1;
    position:relative;
    }
.nav li a {
    color:#3D4451;
    }
.nav li a span.ico {
    width:33px;
    height:33px;
    border-right:1px solid #E1E1E1;
    background-color:#E9E8E8;
    position:absolute;
    left:0;
    top:0;
    }
.nav li a span.text {
    padding:5px 5px 5px 0;
    margin-left:40px;
    display:block;
    }

Answer 2

通过在text-indent中的锚标记上指定li来尝试这种方式，它可以使它看起来像你想要的那样。

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

<强> Demo

更确切地说，使其仅影响li元素内.nav正下方的锚点：

.nav li > a {
    text-indent: -16px;
}