0

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

我现在的情况：

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

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

4

3 回答 3

1

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

例如：

<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' 垂直对齐标签中的文本）

于 2013-01-21T20:16:38.047 回答
1

首先，您必须将所有元素包装在 div 或另一个标签中，这取决于您想要放置元素的位置。在我的示例中，我使用了<header>标签。还建议放在<input>里面<label>，因为它是用户友好的，他们也可以点击文本来检查它。

你可以在这里看到我的修改

于 2013-01-21T20:17:01.667 回答
1

只需使用一个div元素来包装所有内容。这是一个例子。

请注意，通过使用 wrapping div，您可以摆脱以前使用的所有类。另外，请注意元素的for属性label需要相应的 ID。

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

于 2013-01-21T20:14:53.110 回答