html - 扩展标签的宽度以填充父 div 的剩余部分

Question

我在尝试强制 label 标记填充其父级宽度的 100% 时遇到了很多问题，以便它可以根据用户的窗口大小进行调整。

出于某种原因，如果我将宽度设置为 100%，它只是设置一个看似任意的宽度而不管 ( http://d.pr/i/uLDV )。

我正在尝试更改这些标签的宽度:

这是我正在使用的代码。

HTML:

    <div class="page-content">
    <div class="lesson-title">Extend the properties of exponents to rational exponents - Lesson 1</div>
    <div class="lesson-description"><span>Learning outcome for this lesson:</span> Explain how the definition of the meaning of rational exponents follows from extending the properties of integer exponents to those values, allowing for a notation for radicals in terms of rational exponents.</div>
    <div class="tabs">
        <div class="tab">
            <input type="radio" id="tab-1" name="tab-group-1" checked>
            <label for="tab-1">What are rational exponents?</label>
            <div class="content">ONE</div>
        </div>
        <div class="tab">
            <input type="radio" id="tab-2" name="tab-group-1">
            <label for="tab-2">Solving for a fractional exponent</label>
            <div class="content">
                <iframe width="675" height="380" src="https://www.youtube.com/embed/6OFwfxmhtE8?modestbranding=1&iv_load_policy=3&rel=0&showinfo=0&theme=light&color=white&disablekb=1" frameborder="0"></iframe>
            </div>
        </div>
        <div class="tab">
            <input type="radio" id="tab-3" name="tab-group-1">
            <label for="tab-3">Example 1</label>
            <div class="content">stuff</div>
        </div>
        <div class="tab">
            <input type="radio" id="tab-4" name="tab-group-1">
            <label for="tab-4">Example 2</label>
            <div class="content">stuff</div>
        </div>
    </div>
</div>

CSS:

.page-content {
    width: 95%;
    min-width: 875px;
    margin: 25px auto;
}
.lesson-title {
    padding: 15px;
    font-size: 20px;
    font-weight: 100;
    color: #fff;
    background: #2070A2;
}
.lesson-description {
    padding: 15px;
    font-size: 16px;
    font-weight: 100;
    line-height: 22px;
    color: #333;
    background: #FCFCFC;
}
.lesson-description span {
    font-weight: 200;
}
.tabs {
    position: relative;
    min-height: 380px;
    clear: both;
    margin: 25px 0;
}
.tab {
    float: left;
}
.tab label {
    display: block;
    margin-left: 675px;
    font-size: 15px;
    font-weight: 100;
    background: #FCFCFC;
    padding: 20px;
    color: #333;
    border-bottom: 1px solid #fff;
}
.tab[type=radio] {
    display: none;
}
.content {
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    right: 0;
    bottom: 0;
    float: left;
    width: 675px;
    height: 380px;
    margin-bottom: 30px
}
[type=radio]:checked ~ label {
    background: #1897DC;
    color: #FFF;
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
}

Jsfiddle: http://jsfiddle.net/M8XYr/

有没有人对如何实现这个有任何想法？

Answer 1

只需更改 .tab 类:

.tab {
   float: left;
   width: 100%;
 }