html - 如何在固定容器内调整可拉伸(stretch)的ol和绝对 block

Question

我有一个父容器 .secondary-nav-wrap 有 CSS

.secondary-nav-wrap {
    margin: 30px 0;
    position: relative;
}

它包含一个具有变量 li 的 ol 和一个绝对定位的 div .import-26-as 具有 css 代码

position: absolute;
top: 0;
right: 0;

现在三里的时候一切都很好

但是当 li 的数量增加到 5 或 6(最大)时，Import div 与 li 重叠，即

我正在尝试实现这样的设计，其中黄色 div 会自动相应地定位自己。

如果黄色 div 溢出父 div，我完全没问题

编辑:

li 的代码是

.primary-nav li, .secondary-nav li {
float: left;
text-align: center;
list-style: none;
max-width: 190px;
}

ol 的代码是

.primary-nav, .secondary-nav {
display: inline-block;
margin-right: auto!important;
margin-left: auto!important;
position: relative;
margin-top: 0;
margin-bottom: 0;
}

黄色div的CSS代码是

.import-26-as {
position: absolute;
top: 0;
right: 0%;
font-family: "Source Sans Pro",Helvetica,Arial;
font-size: 12px;
color: #4c4725;
height: 34px;
overflow: hidden;
-moz-transition: height 150ms ease-out;
-o-transition: height 150ms ease-out;
-webkit-transition: height 150ms ease-out;
transition: height 150ms ease-out;
}

父 div 被包裹在一个带有 css 的容器 div 中

.container {
width: 950px;
margin: 0 auto;
}

Answer 1

另一种选择是数量查询。我已经添加了 min 3 和 max 6 的 css 代码。您可以通过添加/删除辅助 li 来检查它。你可以微调我的代码，我只是为了测试而创建的。

CSS

.container {
    width: 950px;
    margin: 0 auto;
    font-family: arial;
    font-size: 12px;
}
.primary-nav-wrap ol{
    list-style: none;
    margin: 0 0 20px 0;
}
.primary-nav-wrap ol li {
    display: inline-block;
    padding: 19px;
    width: 111px;
    background-color: aliceblue;
    text-align: center;
}
.secondary-nav {
    margin: 0;
    width: 700px;
}
.secondary-nav li {
    float: left;
    text-align: center;
    list-style: none;
    width: 190px;
    background-color:#999999;
    padding: 20px;
    border-bottom: 10px solid #7A7EF1;
}
ol.secondary-nav li:nth-last-child(n+4), ol.secondary-nav li:nth-last-child(n+4) ~ li {
    max-width: 145px;
    padding-left: 15px;
    padding-right: 15px;
}
ol.secondary-nav li:nth-last-child(n+5), ol.secondary-nav li:nth-last-child(n+5) ~ li { 
    max-width: 120px;
    padding-left: 10px;
    padding-right: 10px;
}

ol.secondary-nav li:nth-last-child(n+6), ol.secondary-nav li:nth-last-child(n+6) ~ li { 
    max-width: 105px;
    padding-left: 5px;
    padding-right: 5px;
}
.import-26-as {
    width: 200px;
    background: yellow;
    float: right;
}
 .import-26-as a {
    font-family: "Source Sans Pro",Helvetica,Arial;
    font-size: 12px;
    color: #4c4725;
    height: 34px;
    display: block;
    text-align: center;
    padding-top: 10px;
}

HTML

<div class="container">
      <div class="primary-nav-wrap">
           <ol class="primary-nav">
               <li><span class="test">link 1</span></li>
               <li><span class="test">link 2</span></li>
               <li><span class="test">link 3</span></li>
               <li><span class="test">link 4</span></li>
               <li><span class="test">link 5</span></li>
               <li><span class="test">link 6</span></li>
           </ol>
       </div>
       <div class="secondary-nav-wrap">
           <ol class="secondary-nav">
               <li><span class="test">A. test test 1</span></li>
               <li><span class="test">B. test test 2</span></li>
               <li><span class="test">C. test test 3</span></li>
               <li><span class="test">D. test test 4</span></li>
               <li><span class="test">D. test test 4</span></li>
           </ol>
           <div class="import-26-as"><a href="">other link</a></div>
       </div>

    </div>