Question

我需要使用这些矩形制作滚动滑块，但是当窗口尺寸较小时，矩形会缩小。

我添加图片以更好地理解。

我尝试设置div年的宽度和高度，但这无济于事。

.years-center {
    text-align: center;
    display: flex;
    overflow-x: scroll;
}

.years {
    display: inline-block;
    margin: 10px;
    width: 220px;
    height: 150px;
    background-color: #FFFFFF;
    margin-top: -60px;
    box-shadow: 0 0px 29px rgba(0,0,0,0.15);
}

.years-p {
    font-size: 80px;
    color: rgb(68, 68, 68);
    font-weight: 900;
    line-height: 0.252;
    text-align: center;
    padding-top: 45px;
}

.years-name {
    font-size: 21px;
    font-family: "Muli";
    color: rgb(68, 68, 68);
    font-weight: bold;
    line-height: 1.238;
    text-align: center;
    padding-top: 34px;
}

<div class="years-center">
    <div class="years years1">
        <p class="years-p">8</p>
        <p class="years-name">let na trhu</p>
    </div>
    <div class="years years2">
        <p class="years-p">10</p>
        <p class="years-name">profesionálů</p>
    </div>
    <div class="years years3">
        <p class="years-p">32</p>
        <p class="years-name">stálých klientů</p>
    </div>
    <div class="years years4">
        <p class="years-p">27</p>
        <p class="years-name">věkový průměr</p>
    </div>
</div>

下一个类似的问题在此处的部分中。答案仅对第一个问题有所帮助。

wrong right

HTML

     <div class="trusts-slider">
        <div class="company">
            <div><img src="img/duveruje/prima.png" alt="prima"></div>
            <div><img src="img/duveruje/hayashi.png" alt="hayashi"></div>
            <div><img src="img/duveruje/projekt.png" alt="projekt"></div>
            <div><img src="img/duveruje/heckl.png" alt="heckl"></div>
        </div>
        <div class="company second-company">
            <div><img src="img/duveruje/energy.png" alt="energy"></div>
            <div><img src="img/duveruje/ipconnect.png" alt="ipconnect"></div>
            <div><img src="img/duveruje/rts.png" alt="rts"></div>
            <div><img src="img/duveruje/cejka.png" alt="cejka"></div>
        </div>
    </div>

CSS

.trusts-slider {
    overflow-x: scroll;
}

.company {
    margin-left: 14%;
    margin-right: 14%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding-bottom: 17px;
}

.company div {
    padding-top: 50px;
    background-color: white;
    width: 240px !important;
    height: 170px !important;
    box-shadow: 0 0px 29px rgba(0,0,0,0.06);
    margin-left: 10px;
    margin-right: 10px;
}

.second-company {
    padding-bottom: 69px;
}

Answer 1

空白：nowrap; 可用于防止元素响应父元素的宽度，但是当显示设置为flex时，它将不起作用。

这应该可以解决问题。

.years-center {
    white-space: nowrap; /* <--- added */
    text-align: center;
    display: block; /* <--- updated */
    overflow-x: scroll;
}

如何不缩小元素

1 个答案: