0

我正在使用引导程序，而我的 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>

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

在此处输入图像描述

4

2 回答 2

3

这是您的小提琴链接，让我们检查它是否适合您。

.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;
    }
于 2013-07-08T05:19:38.843 回答
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 回答