html - 对齐文本而不渗入另一个 span 标签

Question

我正在使用 bootstrap，我的 CSS 给我带来了一些问题。这是我遇到的第二个跨度标签问题的简单示例，导致它“渗入”或“溢出”到第一个跨度标签中。

现在，我不能为此使用表格，因为这不是同事想要的(尽管我肯定不会遇到这个问题)。

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

所以我想要的当然是包装文本，但是“专业知识”这个词应该(需要)直接放在“注册”这个词的下面，而不是在第一个带有图标的 span 标签下面的最左边结束 -铅笔”类

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