Question

我有一种情况，我有一个标题和一些内联它的单选按钮，控制下面显示的内容。出于样式原因，我希望标题的下边框延伸到其容器的边缘，通过以下元素。

截至目前的情况：

<h2 class="header">this is the header</h2>

<label class="l" for="a">this is a label</label>
<input value="a" name="options" type="radio"/>

<label class="l" for="b">this is another label</label>
<input type="radio" name="options" value="b"/>

的CSS：

label.l{
    display: inline-block;
    margin: 4px;
    color: red;
}

h2.header {
    border-bottom: 1px solid blue;
    display: inline;
    margin: 4px;
    font-size: 200%;
}

结果：http://jsfiddle.net/F7pzd/1/

有没有办法让底部边框一直延伸到整个页面？

Answer 1

只需使用div元素来包装所有内容。这是an example。

请注意，通过使用包装div，您可以删除之前使用的所有类。另请注意，for元素的label属性需要相应的ID。

我已经在上面链接的小提琴示例中解决了所有这些问题。

Answer 2

你能否在你的h1和选项周围添加一个容器元素？

e.g：

<div class="border-bottom">
...
</div>

div.border-bottom{
border-bottom: 1px solid blue;   
}

http://jsfiddle.net/TB8dK/1/

或

您可以使用display: inline-block;并为所有元素设置静态高度。 http://jsfiddle.net/yLUC7/5/

（注意使用'line-height'垂直对齐标签中的文字）

Answer 3

首先，您必须将所有元素包含在div或其他标记内，取决于您想要定位元素的位置。在我的示例中，我使用了<header>标记。此外，建议将<input>放在<label>内，因为用户友好，他们也可以检查它是否也在文本上点击。

您可以看到我的修改here

在多个内联元素中扩展底部边框

3 个答案: