把固定行放在每個滾動div與CSS

Question

我有一些div包含標誌+標籤+箭頭。我會用json檢索，所以我不會知道確切的數字。我想要做的是水平對齊標誌+標籤+箭頭，並添加一個滾動條，如果標籤溢出-x。箭頭必須始終可見，並且位於div的底部。我究竟做錯了什麼？

body { 
 
     \t font-family: "Open Sans", Helvetica, sans-serif; 
 
    \t color: #89867e; 
 
    \t background: #f9f9f9; 
 
    } 
 
    .wrapper { 
 
    \t margin: 20px; 
 
    \t padding: 2em; 
 
    \t list-style: none; 
 
    \t font-size: 1.5em; 
 
    \t font-weight: 300; 
 
    \t max-height: 388px; 
 
    \t white-space: nowrap; 
 
    \t overflow-y: hidden; 
 
     overflow-x: scroll; 
 
     -webkit-overflow-scrolling: touch; 
 
     background-color: #ccc; 
 
     margin-bottom:25px; 
 
    } 
 

 
    .internal { 
 
     \t display: inline; 
 
    \t height: 164px; 
 
    \t padding: .4em 1em; \t 
 
    \t border: 2px solid rgba(255,255,255,0.1); 
 
    \t -webkit-border: 2px solid rgba(255,255,255,0.1); 
 
    \t -moz-border: 2px solid rgba(255,255,255,0.1); 
 
    \t -o-border: 2px solid rgba(255,255,255,0.1); 
 
    \t color: rgba(249, 249, 249, .9); 
 
    \t text-decoration: none; 
 
    \t font-size: 1.5em; 
 
    \t font-weight: 300; 
 
    \t margin-right: 18px; 
 
    } 
 
    
 

 
    .wrapper a:nth-child(6n+1) { background: #e87352; } 
 

 
    .wrapper a:nth-child(6n+2) { background: #ebc85e; } 
 

 
    .wrapper a:nth-child(6n+3) { background: #3bbec0; } 
 

 
    .wrapper a:nth-child(6n+4) { background: #4ad585; } 
 

 
    .wrapper a:nth-child(6n+5) { background: rgb(27, 54, 71); } 
 

 
    .wrapper a:nth-child(6n+6) { background: rgb(21, 40, 54); } 
 
    
 

 
    .wrapper:nth-child(6n+1) { background: rgb(208, 101, 3); } 
 

 
    .wrapper:nth-child(6n+2) { background: rgb(233, 147, 26); } 
 

 
    .wrapper:nth-child(6n+3) { background: rgb(22, 145, 190); } 
 

 
    .wrapper:nth-child(6n+4) { background: rgb(22, 107, 162); } 
 

 
    .wrapper:nth-child(6n+5) { background: rgb(27, 54, 71); } 
 

 
    .wrapper:nth-child(6n+6) { background: rgb(21, 40, 54); } 
 

 
    .trasparente { 
 
     \t background: transparent !important; 
 
    \t padding: 0; 
 
    \t border:none; 
 
    } 
 

 
    .logo { 
 
    \t max-width: 318px; 
 
    \t vertical-align: middle; 
 
    \t margin-right: 18px; 
 
    } 
 

 
/* arrow */ 
 
.arrow-wrap { 
 
    position:absolute; 
 
    z-index:1; 
 
    left:50%; 
 
    padding: 15px 15px !important; 
 
    bottom: 30px; 
 
    margin-left:-5em; 
 
    background:#111 !important; 
 
    width: 75px; 
 
    height: 75px; 
 
    padding:4em 2em; 
 
    border-radius:50%; 
 
\t -webkit-border-radius:50%; 
 
\t -moz-border-radius:50%; 
 
\t -o-border-radius:50%; 
 
    font-size:.6em; 
 
    display:block; 
 
    box-shadow:0px 0px 5px 0px #333; 
 
\t -webkit-box-shadow:0px 0px 5px 0px #333; 
 
\t -moz-box-shadow:0px 0px 5px 0px #333; 
 
\t -o-box-shadow:0px 0px 5px 0px #333; 
 
    transform: rotate(-90deg); 
 
    -webkit-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
    -o-transform: rotate(-90deg); 
 
} 
 

 
.arrow { 
 
    float:left; 
 
    position:relative; 
 
    width: 0px; 
 
\t height: 0px; 
 
    left: -6px; 
 
    top: 25px; 
 
\t border-style: solid; 
 
\t -webkit-border-style: solid; 
 
\t -moz-border-style: solid; 
 
\t -o-border-style: solid; 
 
\t border-width: 3em 3em 0 3em; 
 
\t -webkit-border-width: 3em 3em 0 3em; 
 
\t -moz-border-width: 3em 3em 0 3em; 
 
\t -o-border-width: 3em 3em 0 3em; 
 
\t border-color: #ffffff transparent transparent transparent; 
 
\t -webkit-border-color: #ffffff transparent transparent transparent; 
 
\t -moz-border-color: #ffffff transparent transparent transparent; 
 
\t -o-border-color: #ffffff transparent transparent transparent; 
 
    -webkit-transform:rotate(360deg); 
 
} 
 

 
.arrow:after { 
 
    content:''; 
 
    position:absolute; 
 
    left: -43px; 
 
    top: -46.8px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
\t -webkit-border-style: solid; 
 
\t -moz-border-style: solid; 
 
\t -o-border-style: solid; 
 
    border-width: 3em 3em 0 3em; 
 
\t -webkit-border-width: 3em 3em 0 3em; 
 
\t -moz-border-width: 3em 3em 0 3em; 
 
\t -o-border-width: 3em 3em 0 3em; 
 
    border-color: #111 transparent transparent transparent; 
 
\t -webkit-border-color: #111 transparent transparent transparent; 
 
\t -moz-border-color: #111 transparent transparent transparent; 
 
\t -o-border-color: #111 transparent transparent transparent; 
 
    -webkit-transform:rotate(360deg); 
 
} 
 

 
@-webkit-keyframes arrows { 
 
    0% { top:0; } 
 
    10% { top:12%; } 
 
    20% { top:0; } 
 
    30% { top:12%; } 
 
    40% { top:-12%; } 
 
    50% { top:12%; } 
 
    60% { top:0; } 
 
    70% { top:12%; } 
 
    80% { top:-12%; } 
 
    90% { top:12%; } 
 
    100% { top:0; } 
 
} 
 
    
 
.arrow-wrap .arrow { 
 
\t animation: arrows 2.8s 0.4s; 
 
\t animation-delay: 3s; 
 
    -webkit-animation: arrows 2.8s 0.4s; 
 
    -webkit-animation-delay: 3s; 
 
} 
 

 
.w { position: relative; }

 <div class="wrapper"> 
 
     <a href="#" class="internal trasparente"><img src="https://upload.wikimedia.org/wikipedia/bar/8/86/744px-Siemens-logo_svg.png" class="logo" style="margin-top:20px" alt="logo"></a> 
 
     <a href="" class="internal">item 1</a> 
 
     <a href="" class="internal">item 2</a> 
 
     <a href="" class="internal">item 3</a> 
 
     <a href="" class="internal">item 4</a> 
 
     <a href="" class="internal">item 5</a> 
 
     <a href="" class="internal">item 6</a> 
 
     <a href="" class="internal">item 7</a> 
 
     <a href="" class="internal">item 8</a> 
 
     <a href="" class="internal">item 9</a> 
 
     <a href="" class="internal">item 10</a> 
 
     <a href="" class="internal">item 11</a> 
 
     <a href="" class="internal">item 12</a> 
 
     <a href="" class="internal">item 13</a> 
 
     <a href="" class="internal">item 14</a> 
 
     <a href="" class="internal">item 15</a> 
 
     <a href="" class="internal">item 16</a> 
 
     <a href="" class="internal">item 17</a> 
 
     <a href="" class="internal">item 18</a> 
 
     <a href="" class="internal">item 19</a> 
 
     <a href="" class="internal">item 20</a> 
 
     <a href="" class="internal">item 21</a> 
 
     <a href="" class="internal">item 22</a> 
 
     <a href="" class="internal">item 23</a> 
 
     <a href="" class="internal">item 24</a> 
 
     <a href="" class="internal">item 25</a> 
 
     <a href="" class="internal">item 26</a> 
 
     <a href="" class="internal">item 27</a> 
 
     <a href="" class="internal">item 28</a> 
 
     <a href="" class="internal">item 29</a> 
 
     <a href="" class="internal">item 30</a>  
 
    <!-- ARROW --> 
 
     <div class="w"> 
 
\t <a class="arrow-wrap" href="#"> 
 
\t <span class="arrow"></span> 
 
\t </a>  
 
     </div> 
 
    </div> <!-- end wapper --> 
 

 
    <div class="wrapper"> 
 
     <a href="#" class="internal trasparente"><img src="http://www.asborsoniww.com/media/tes_logo.png" class="logo" style="margin-top:20px" alt="logo"></a> 
 
     <a href="" class="internal">item 1</a> 
 
     <a href="" class="internal">item 2</a> 
 
     <a href="" class="internal">item 3</a> 
 
     <a href="" class="internal">item 4</a> 
 
     <a href="" class="internal">item 5</a> 
 
     <a href="" class="internal">item 6</a> 
 
     <a href="" class="internal">item 7</a> 
 
     <a href="" class="internal">item 8</a> 
 
     <a href="" class="internal">item 9</a> 
 
     <a href="" class="internal">item 10</a> 
 
     <a href="" class="internal">item 11</a> 
 
     <a href="" class="internal">item 12</a> 
 
     <a href="" class="internal">item 13</a> 
 
     <a href="" class="internal">item 14</a> 
 
     <a href="" class="internal">item 15</a> 
 
     <a href="" class="internal">item 16</a> 
 
     <a href="" class="internal">item 17</a> 
 
     <a href="" class="internal">item 18</a> 
 
     <a href="" class="internal">item 19</a> 
 
     <a href="" class="internal">item 20</a> 
 
     <a href="" class="internal">item 21</a> 
 
     <a href="" class="internal">item 22</a> 
 
     <a href="" class="internal">item 23</a> 
 
     <a href="" class="internal">item 24</a> 
 
     <a href="" class="internal">item 25</a> 
 
     <a href="" class="internal">item 26</a> 
 
     <a href="" class="internal">item 27</a> 
 
     <a href="" class="internal">item 28</a> 
 
     <a href="" class="internal">item 29</a> 
 
     <a href="" class="internal">item 30</a>  
 
    <!-- ARROW --> 
 
    <div class="w"> 
 
\t <a class="arrow-wrap" href="#"> 
 
\t  <span class="arrow"></span> 
 
\t </a>  
 
    </div> 
 
    </div> <!-- end wapper --> 
 

 
    <div class="wrapper"> 
 
     <a href="" class="internal">item 1</a> 
 
     <a href="" class="internal">item 2</a> 
 
     <a href="" class="internal">item 3</a> 
 
     <a href="" class="internal">item 4</a> 
 
     <a href="" class="internal">item 5</a> 
 
     <a href="" class="internal">item 6</a> 
 
     <a href="" class="internal">item 7</a> 
 
     <a href="" class="internal">item 8</a> 
 
     <a href="" class="internal">item 9</a> 
 
     <a href="" class="internal">item 10</a> 
 
     <a href="" class="internal">item 11</a> 
 
     <a href="" class="internal">item 12</a> 
 
     <a href="" class="internal">item 13</a> 
 
     <a href="" class="internal">item 14</a> 
 
     <a href="" class="internal">item 15</a> 
 
     <a href="" class="internal">item 16</a> 
 
     <a href="" class="internal">item 17</a> 
 
     <a href="" class="internal">item 18</a> 
 
     <a href="" class="internal">item 19</a> 
 
     <a href="" class="internal">item 20</a> 
 
     <a href="" class="internal">item 21</a> 
 
     <a href="" class="internal">item 22</a> 
 
     <a href="" class="internal">item 23</a> 
 
     <a href="" class="internal">item 24</a> 
 
     <a href="" class="internal">item 25</a> 
 
     <a href="" class="internal">item 26</a> 
 
     <a href="" class="internal">item 27</a> 
 
     <a href="" class="internal">item 28</a> 
 
     <a href="" class="internal">item 29</a> 
 
     <a href="" class="internal">item 30</a> 
 
     
 
    <!-- ARROW --> 
 
     <div class="w"> 
 
\t <a class="arrow-wrap" href="#"> 
 
\t <span class="arrow"></span> 
 
\t </a>  
 
     </div> 
 
    </div> <!-- end wapper -->

Answer 1

從wrapper類取出箭頭HTML。 （所以它會附加到父母而不是列表本身）。

body { 
 
     \t font-family: "Open Sans", Helvetica, sans-serif; 
 
    \t color: #89867e; 
 
    \t background: #f9f9f9; 
 
    } 
 
    .wrapper { 
 
    \t margin: 20px; 
 
    \t padding: 2em; 
 
    \t list-style: none; 
 
    \t font-size: 1.5em; 
 
    \t font-weight: 300; 
 
    \t max-height: 388px; 
 
    \t white-space: nowrap; 
 
    \t overflow-y: hidden; 
 
     overflow-x: scroll; 
 
     -webkit-overflow-scrolling: touch; 
 
     background-color: #ccc; 
 
     margin-bottom:25px; 
 
    } 
 

 
    .internal { 
 
     \t display: inline; 
 
    \t height: 164px; 
 
    \t padding: .4em 1em; \t 
 
    \t border: 2px solid rgba(255,255,255,0.1); 
 
    \t -webkit-border: 2px solid rgba(255,255,255,0.1); 
 
    \t -moz-border: 2px solid rgba(255,255,255,0.1); 
 
    \t -o-border: 2px solid rgba(255,255,255,0.1); 
 
    \t color: rgba(249, 249, 249, .9); 
 
    \t text-decoration: none; 
 
    \t font-size: 1.5em; 
 
    \t font-weight: 300; 
 
    \t margin-right: 18px; 
 
    } 
 
    
 

 
    .wrapper a:nth-child(6n+1) { background: #e87352; } 
 

 
    .wrapper a:nth-child(6n+2) { background: #ebc85e; } 
 

 
    .wrapper a:nth-child(6n+3) { background: #3bbec0; } 
 

 
    .wrapper a:nth-child(6n+4) { background: #4ad585; } 
 

 
    .wrapper a:nth-child(6n+5) { background: rgb(27, 54, 71); } 
 

 
    .wrapper a:nth-child(6n+6) { background: rgb(21, 40, 54); } 
 
    
 

 
    .wrapper:nth-child(6n+1) { background: rgb(208, 101, 3); } 
 

 
    .wrapper:nth-child(6n+2) { background: rgb(233, 147, 26); } 
 

 
    .wrapper:nth-child(6n+3) { background: rgb(22, 145, 190); } 
 

 
    .wrapper:nth-child(6n+4) { background: rgb(22, 107, 162); } 
 

 
    .wrapper:nth-child(6n+5) { background: rgb(27, 54, 71); } 
 

 
    .wrapper:nth-child(6n+6) { background: rgb(21, 40, 54); } 
 

 
    .trasparente { 
 
     \t background: transparent !important; 
 
    \t padding: 0; 
 
    \t border:none; 
 
    } 
 

 
    .logo { 
 
    \t max-width: 318px; 
 
    \t vertical-align: middle; 
 
    \t margin-right: 18px; 
 
    } 
 

 
/* arrow */ 
 
.arrow-wrap { 
 
    position:absolute; 
 
    z-index:1; 
 
    left:50%; 
 
    padding: 15px 15px !important; 
 
    bottom: 30px; 
 
    margin-left:-5em; 
 
    background:#111 !important; 
 
    width: 75px; 
 
    height: 75px; 
 
    padding:4em 2em; 
 
    border-radius:50%; 
 
\t -webkit-border-radius:50%; 
 
\t -moz-border-radius:50%; 
 
\t -o-border-radius:50%; 
 
    font-size:.6em; 
 
    display:block; 
 
    box-shadow:0px 0px 5px 0px #333; 
 
\t -webkit-box-shadow:0px 0px 5px 0px #333; 
 
\t -moz-box-shadow:0px 0px 5px 0px #333; 
 
\t -o-box-shadow:0px 0px 5px 0px #333; 
 
    transform: rotate(-90deg); 
 
    -webkit-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
    -o-transform: rotate(-90deg); 
 
} 
 

 
.arrow { 
 
    float:left; 
 
    position:relative; 
 
    width: 0px; 
 
\t height: 0px; 
 
    left: -6px; 
 
    top: 25px; 
 
\t border-style: solid; 
 
\t -webkit-border-style: solid; 
 
\t -moz-border-style: solid; 
 
\t -o-border-style: solid; 
 
\t border-width: 3em 3em 0 3em; 
 
\t -webkit-border-width: 3em 3em 0 3em; 
 
\t -moz-border-width: 3em 3em 0 3em; 
 
\t -o-border-width: 3em 3em 0 3em; 
 
\t border-color: #ffffff transparent transparent transparent; 
 
\t -webkit-border-color: #ffffff transparent transparent transparent; 
 
\t -moz-border-color: #ffffff transparent transparent transparent; 
 
\t -o-border-color: #ffffff transparent transparent transparent; 
 
    -webkit-transform:rotate(360deg); 
 
} 
 

 
.arrow:after { 
 
    content:''; 
 
    position:absolute; 
 
    left: -43px; 
 
    top: -46.8px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
\t -webkit-border-style: solid; 
 
\t -moz-border-style: solid; 
 
\t -o-border-style: solid; 
 
    border-width: 3em 3em 0 3em; 
 
\t -webkit-border-width: 3em 3em 0 3em; 
 
\t -moz-border-width: 3em 3em 0 3em; 
 
\t -o-border-width: 3em 3em 0 3em; 
 
    border-color: #111 transparent transparent transparent; 
 
\t -webkit-border-color: #111 transparent transparent transparent; 
 
\t -moz-border-color: #111 transparent transparent transparent; 
 
\t -o-border-color: #111 transparent transparent transparent; 
 
    -webkit-transform:rotate(360deg); 
 
} 
 

 
@-webkit-keyframes arrows { 
 
    0% { top:0; } 
 
    10% { top:12%; } 
 
    20% { top:0; } 
 
    30% { top:12%; } 
 
    40% { top:-12%; } 
 
    50% { top:12%; } 
 
    60% { top:0; } 
 
    70% { top:12%; } 
 
    80% { top:-12%; } 
 
    90% { top:12%; } 
 
    100% { top:0; } 
 
} 
 
    
 
.arrow-wrap .arrow { 
 
\t animation: arrows 2.8s 0.4s; 
 
\t animation-delay: 3s; 
 
    -webkit-animation: arrows 2.8s 0.4s; 
 
    -webkit-animation-delay: 3s; 
 
} 
 

 
.w { position: relative; }

 <div class="wrapper"> 
 
     <a href="#" class="internal trasparente"><img src="https://upload.wikimedia.org/wikipedia/bar/8/86/744px-Siemens-logo_svg.png" class="logo" style="margin-top:20px" alt="logo"></a> 
 
     <a href="" class="internal">item 1</a> 
 
     <a href="" class="internal">item 2</a> 
 
     <a href="" class="internal">item 3</a> 
 
     <a href="" class="internal">item 4</a> 
 
     <a href="" class="internal">item 5</a> 
 
     <a href="" class="internal">item 6</a> 
 
     <a href="" class="internal">item 7</a> 
 
     <a href="" class="internal">item 8</a> 
 
     <a href="" class="internal">item 9</a> 
 
     <a href="" class="internal">item 10</a> 
 
     <a href="" class="internal">item 11</a> 
 
     <a href="" class="internal">item 12</a> 
 
     <a href="" class="internal">item 13</a> 
 
     <a href="" class="internal">item 14</a> 
 
     <a href="" class="internal">item 15</a> 
 
     <a href="" class="internal">item 16</a> 
 
     <a href="" class="internal">item 17</a> 
 
     <a href="" class="internal">item 18</a> 
 
     <a href="" class="internal">item 19</a> 
 
     <a href="" class="internal">item 20</a> 
 
     <a href="" class="internal">item 21</a> 
 
     <a href="" class="internal">item 22</a> 
 
     <a href="" class="internal">item 23</a> 
 
     <a href="" class="internal">item 24</a> 
 
     <a href="" class="internal">item 25</a> 
 
     <a href="" class="internal">item 26</a> 
 
     <a href="" class="internal">item 27</a> 
 
     <a href="" class="internal">item 28</a> 
 
     <a href="" class="internal">item 29</a> 
 
     <a href="" class="internal">item 30</a>   
 
     </div> 
 
    <!-- ARROW --> 
 
     <div class="w"> 
 
\t <a class="arrow-wrap" href="#"> 
 
\t <span class="arrow"></span> 
 
\t </a> 
 
    </div> <!-- end wapper -->