Question

我有以下代码用于标签。但问题在于，由于left: 50px; .sc-tabs上的最后一个标签不完全可见。设置width: calc(100% + 50px);的{{1}}只会让情况变得更糟。所以我的问题是如何让.sc-tabs足够长以显示所有.sc-tabs？

.sc-tab-icon-text

.sc-tabs {
    -ms-box-shadow: 0 .28571rem .57143rem 0 rgba(0, 0, 0, 0.144264), 0 .21429rem .57143rem 0 rgba(0, 0, 0, 0.236);
    -o-box-shadow: 0 .28571rem .57143rem 0 rgba(0, 0, 0, 0.144264), 0 .21429rem .57143rem 0 rgba(0, 0, 0, 0.236);
    box-shadow: 0 .28571rem .57143rem 0 rgba(0, 0, 0, 0.144264), 0 .21429rem .57143rem 0 rgba(0, 0, 0, 0.236);
    background: #3F51B5;
    overflow: hidden;
    position: fixed;
    top: 3.42857rem;
    width: 100%;
    z-index: 2;
    left: 50px;
    white-space: nowrap
}
.sc-tabs:hover {
    overflow: auto;
    overflow-y: hidden
}
.sc-tabs .sc-tab-icon-text {
    border-bottom: .14286rem solid #3F51B5;
    color: rgba(255, 255, 255, 0.7);
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    max-width: 18.85714rem;
    min-width: 5.14286rem;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    word-wrap: break-word;
    -webkit-transition: border 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: border 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1)
}
.sc-tabs .sc-tab-icon-text:hover {
    border-bottom: .14286rem solid #fff;
    color: #fff
}
.sc-tabs .sc-tab-icon-text .material-icons {
    width: 1.71429rem;
    height: 1.71429rem;
    font-size: 1.71429rem
}
.sc-tabs .sc-tab-icon-text {
    height: 5.14286rem;
    padding: .71429rem .85714rem 1.14286rem .85714rem
}
.sc-tabs .sc-tab-icon-text span {
    display: block;
    margin: .71429rem 0 0 0;
    width: 100%
}

Answer 1

.sc-tabs {
  width: 96%;
  z-index: 2;
  left: 2%;
  white-space: nowrap
}

如果要从左侧设置空间。然后以％表示，使整体变为100％;的左+右+宽度

.sc-tabs { -ms-box-shadow: 0 .28571rem .57143rem 0 rgba(0, 0, 0, 0.144264), 0 .21429rem .57143rem 0 rgba(0, 0, 0, 0.236); -o-box-shadow: 0 .28571rem .57143rem 0 rgba(0, 0, 0, 0.144264), 0 .21429rem .57143rem 0 rgba(0, 0, 0, 0.236); box-shadow: 0 .28571rem .57143rem 0 rgba(0, 0, 0, 0.144264), 0 .21429rem .57143rem 0 rgba(0, 0, 0, 0.236); background: #3F51B5; overflow: hidden; position: fixed; top: 3.42857rem; width: 96%; z-index: 2; left: 2%; white-space: nowrap } .sc-tabs:hover { overflow: auto; overflow-y: hidden } .sc-tabs .sc-tab-icon-text { border-bottom: .14286rem solid #3F51B5; color: rgba(255, 255, 255, 0.7); display: inline-block; font-size: 1rem; font-weight: 500; max-width: 18.85714rem; min-width: 5.14286rem; text-align: center; text-overflow: ellipsis; text-transform: uppercase; word-wrap: break-word; -webkit-transition: border 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: border 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1) } .sc-tabs .sc-tab-icon-text:hover { border-bottom: .14286rem solid #fff; color: #fff } .sc-tabs .sc-tab-icon-text .material-icons { width: 1.71429rem; height: 1.71429rem; font-size: 1.71429rem } .sc-tabs .sc-tab-icon-text { height: 5.14286rem; padding: .71429rem .85714rem 1.14286rem .85714rem } .sc-tabs .sc-tab-icon-text span { display: block; margin: .71429rem 0 0 0; width: 100% }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="sc-tabs"> <div class="sc-tab-icon-text"><i class="material-icons">home</i><span>1</span></div> <div class="sc-tab-icon-text"><i class="material-icons">home</i><span>2</span></div> <div class="sc-tab-icon-text"><i class="material-icons">home</i><span>3</span></div> <div class="sc-tab-icon-text"><i class="material-icons">home</i><span>4</span></div> <div class="sc-tab-icon-text"><i class="material-icons">home</i><span>5</span></div> <div class="sc-tab-icon-text"><i class="material-icons">home</i><span>6</span></div> <div class="sc-tab-icon-text"><i class="material-icons">home</i><span>7</span></div> <div class="sc-tab-icon-text"><i class="material-icons">home</i><span>8</span></div> <div class="sc-tab-icon-text"><i class="material-icons">home</i><span>9</span></div> <div class="sc-tab-icon-text"><i class="material-icons">home</i><span>10</span></div> </div>

Answer 2

这是一个粗略的解决方案。我使用了display：table，而不是你的块和其他属性。这将帮助您以适当的方式实现您想要的任何目标。

https://jsfiddle.net/ko6xtw1g/

.sc-tabs{display: table;} .sc-tab-icon-text{display: table-cell;}

我也删除了左边：50％;

Answer 3

似乎这是解决方案：

.sc-tabs {
   width: calc(100% - 50px);
}

水平可滚动div不完全可见

3 个答案: