css - 我怎样才能让这架 Accordion 响应？

Question

我有这个 Accordion ，我想知道如何让它 100% 宽度和响应。我玩过宽度属性和显示属性，它要么破坏它，要么什么都不做。

https://jsfiddle.net/5n4ekqdy/

<div class="accordion horizontal">
    <ul>
        <li>
            <input type="radio" id="vert-1" name="vert-accordion" checked="checked" />
            <label for="vert-1"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
            <div class="content">
                <h3>Free Shipping</h3>
            </div>
        </li>
        <li>
            <input type="radio" id="vert-2" name="vert-accordion" />
            <label for="vert-2"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
            <div class="content">
                <h3>Free Shipping</h3>
            </div>
        </li>
        <li>
            <input type="radio" id="vert-3" name="vert-accordion" />
            <label for="vert-3"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
            <div class="content">
                <h3>Free Shipping</h3>
            </div>
        </li>
        <li>
            <input type="radio" id="vert-4" name="vert-accordion" />
            <label for="vert-4"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
           <div class="content">
                <h3>Free Shipping</h3>
            </div>
        </li>
    </ul>
</div>

Answer 1

li 是 Accordion 宽度最大的部分。您只需进行一项更改即可获得所需的结果。

更改 div.content 的宽度，当 radio 被检查为 100% 查看器宽度的计算 - 减去每个标签的宽度 - 减去可见填充和边框的宽度。

像这样:width: calc(100vw - 316px)

如果更改内边距/边框/图像宽度，则必须相应地进行更改。

顺便说一句，我喜欢纯css的 Accordion 动画。甜!

body {
  margin: 0;
  padding: 0;
}
.accordion {
    margin:0 auto;
    font-size:14px;
    width:100%;
    padding:0px;
    background:#fff;
}
.accordion ul {
    list-style:none;
    margin:0;
    padding:0;    
}
.accordion li {
    margin:0;
    padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
    display:none;
}
.accordion label {
    display: block;
    font-size: 16px;
    line-height: 16px;
    background: #00425f;
    color: #ffffff;
    font-weight: 400;
    cursor: pointer;
    text-transform: uppercase;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
  background: #005073;
    color: #FFF;
}
.accordion .content {
    padding: 0 10px;
    overflow: hidden;
    border: 1px solid #fff;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
}
.accordion p {
    color:#333;
    margin:0 0 10px;
}
.accordion h3 {
    color: #ffffff;
    padding: 0;
    margin: 10px 0;
}

/* Horizontal */
/* Unfortunately fixed heights need to be set for this */
.horizontal {
    overflow:hidden;
    height:49px;
}
.horizontal ul li {
    float:left;
    margin:0 1px 0 0;
}
.horizontal ul li label {
    text-align: center;
    height: 49px;
    padding: 5px;
    width: 60px;
    float: left;
}
.horizontal ul li .content {
    height: 49px;
    padding: 0;
    display: inline-block;
    visibility: hidden;
    width: 1px;
    border-left: 0;
}
.horizontal [type=radio]:checked ~ label {
    border-right:0;    
}
.horizontal ul li label:hover {
    //border:1px solid #005073; /* Again, we don't want the border to disappear on hover */
}
.horizontal [type=radio]:checked ~ label ~ .content {
    visibility: visible;

    /* HERE IS THE CHANGE */
    width: calc(100vw - 316px);

    padding: 0 10px;
    border: 1px solid #005073;
    border-left: 0;
    background: #005073;
}

<div class="accordion horizontal">
    <ul>
        <li>
            <input type="radio" id="vert-1" name="vert-accordion" checked="checked" />
            <label for="vert-1"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
            <div class="content">
                <h3>Free Shipping</h3>
            </div>
        </li>
        <li>
            <input type="radio" id="vert-2" name="vert-accordion" />
            <label for="vert-2"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
            <div class="content">
                <h3>Free Shipping</h3>
            </div>
        </li>
        <li>
            <input type="radio" id="vert-3" name="vert-accordion" />
            <label for="vert-3"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
            <div class="content">
                <h3>Free Shipping</h3>
            </div>
        </li>
        <li>
            <input type="radio" id="vert-4" name="vert-accordion" />
            <label for="vert-4"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
           <div class="content">
                <h3>Free Shipping</h3>
            </div>
        </li>
    </ul>
</div>