javascript - 使子元素具有与父元素相同的宽度和边框

Question

例如我有一个“li”标签，里面有一个“a”标签。我希望整行有一个 border-bottom: 1px solid #ccc;

<li class=sub">
     <a href="3" class="active">
         <span id="1">Text</span>
     </a>
</li>

目前我有

span {
    width: 90%;
    border-bottom: 1px solid #ccc;
    font-size:12px;
}

li {
    width: 100%;
}

但似乎只有文本会被加下划线，我希望像整行一样的整个“li”都被加下划线。但不是强调“li”而是“span”标签。所以基本上希望我的“span”标签与父“li”的宽度相同，但不确定我的 CSS 中缺少什么。

Answer 1

你必须明白 span 是一个内联元素，对于这样的元素，没有 width 这样的东西，使 span 继承宽度，你需要确保将 display 设置为 block 元素，在你的情况下，尝试 inline-block 。

实例:http://jsbin.com/liwah/1/edit?html,css,output