我怎样才能让这支手风琴变得有意义？

Question

我有这种手风琴，我想知道如何让它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是给手风琴带来最大宽度的东西。您只需要进行一次更改即可获得所需的结果。

当检查收音机时，将div.content的宽度更改为查看器宽度的100％计算 - 减去每个标签的宽度 - 减去可见填充和边框的宽度。

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

如果更改填充/边框/图像宽度，则必须相应地更改它。

顺便说一句，我喜欢纯css中的手风琴动画。甜！

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>