在html中右側插入箭頭

我有一些面板被一些元素填充。當這些元素處於溢出狀態時，會出現水平滾動條。我想在面板的右側放一個箭頭。我把箭頭放在面板中，但它是所有元素的底部。我希望它是可見的，定位爲這次選秀：在html中右側插入箭頭

這是HTML代碼：

<div class="container"> 
<div class="main"> 
    <div id="menu" class="nav">     
     <ul> 
      <li> 
      <div class="commesse"> 
       <a href="#"><img src="http://orig00.deviantart.net/fae8/f/2011/288/4/5/coca_cola_logo_png_by_ivettecaro-d4cxaok.png" class="logo"></a> 
          <ul class="matr"> 
           <li><a href="#">Text 23</a></li> 
           <li><a href="#">Text 78</a></li> 
           <li><a href="#">Text 1351</a></li> 
           <li><a href="#">Text 63</a></li> 
           <li><a href="#">Text 81</a></li> 
          </ul> 
         </div> 
         <div class="arrow-overflow-x"></div> 
        </li> 
        <li> 
         <div class="commesse"> 
          <a href="#"><img src="http://www.abondance.com/Bin/bing-logo.png" class="logo"></a> 
          <ul class="matr"> 
           <li><a href="#">Text 1235</a></li> 
           <li><a href="#">Text 61</a></li> 
           <li><a href="#">Text 72</a></li> 
           <li><a href="#">Text 42</a></li> 
           <li><a href="#">Text 771</a></li> 
           <li><a href="#">Text 671,b</a></li> 
           <li><a href="#">Text 217.a</a></li> 
           <li><a href="#">Text 2754</a></li> 
           <li><a href="#">Text 2</a></li> 
           <li><a href="#">Text 887</a></li> 
          </ul> 
         </div> 
        </li> 
        <li> 
         <div class="commesse"> 
          <a href="#"> 
           <span class="user icon"><img class="img-circle" src="img/search.png"/></span> 
           <span>Text</span> 
          </a> 
         </div> 
        </li> 
        <li> 
    <a href="clienti/cliente1/cliente1.html"> 
          <div class="commesse"> 
    <span class="user icon"><img class="img-circle" src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png"/></span> 
    <span>Text</span> 
</div></a> 
</li>

這是CSS代碼：

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
body, html { font-size: 15px; padding: 0; margin: 0; overflow-x: hidden;}

.main：after {clear：both; }

body { 
font-family: "Open Sans", Helvetica, sans-serif; 
color: #89867e; 
background: #f9f9f9; 
background-image: url("../img/bg-commesse.jpg"); 
} 

a { 
color: #333; 
text-decoration: none; 
} 

a:hover { 
color: #fff; 
} 
.main { 
max-width: 82.667em; 
} 

.logo { 
max-height: 76px; 
} 

.nav ul { 
margin: 0; 
padding: 0; 
list-style: none; 
font-size: 1.5em; 
font-weight: 300; 
max-height: 388px; 
} 

.nav li { 
display: flex; 
float: none; 
width: 100%; 
height: 164px; 
border: 2px solid rgba(255,255,255,0.1); 
-webkit-border: 2px solid rgba(255,255,255,0.1); 
-moz-border: 2px solid rgba(255,255,255,0.1); 
-o-border: 2px solid rgba(255,255,255,0.1); 
margin-bottom: 30px; 
overflow-x: auto; 
overflow-y: hidden; 
} 
.nav a { 
color: rgba(249, 249, 249, .9); 
text-decoration: none; 
padding: 0em 0.8em 0em; 
white-space: nowrap; 
-webkit-transition: color .5s, background .5s, height .5s; 
-moz-transition: color .5s, background .5s, height .5s; 
-o-transition: color .5s, background .5s, height .5s; 
-ms-transition: color .5s, background .5s, height .5s; 
transition: color .5s, background .5s, height .5s; 
} 

.nav li span, 
.nav li span.icon { 
display: inline-block; 
} 

.nav li .icon + span { 
font-size: 1.3em; 
} 

.icon + span { 
position: relative; 
top: -0.1em; 
} 

.commesse { 
display: flex; 
align-items: center; 
} 

.commesse ul li { 
padding: 17px; 
margin-left: 20px; 
display: inline; 
color: #fff; 
font-size: 28px; 
} 

.commesse ul { 
white-space: nowrap; 
} 

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

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

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

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

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

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

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

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

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

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

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

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

.user{ 
border-radius: 50%; 
display: block; 
height: 120px; 
width: 120px; 
} 

.user img{ 
background: none repeat scroll 0 0 #FFFFFF; 
border: 4px solid #FFFFFF; 
width: 100%; 
vertical-align: middle; 
} 

.img-circle { 
border-radius: 50%; 
} 

.matr a { 
display: inherit; 
color: inherit; 
text-decoration: inherit; 
padding: inherit; 
white-space: inherit; 
} 

.arrow-overflow-x { 
background-image: url("http://lib.store.yahoo.net/lib/artbook/largerightarrowblack.png"); 
background-position: center center; 
background-repeat: no-repeat; 
background-size: contain; 
content: ""; 
display: table; 
height: 30px; 
width: 30px; 
margin: 0px; 
}

這是運行代碼：JSFIDDLE 謝謝！

來源

2016-01-21 panagulis72

檢查鉻，它不會到底部，它堅持正確的。 –

呃......那是真的！這很有趣... – panagulis72

我與表的幫助下嘗試了標籤。

  <table> 

      <tr> 
      <td> 
          <ul class="matr"> 
           <li><a href="#">Text 23</a></li> 
           <li><a href="#">Text 78</a></li> 
           <li><a href="#">Text 1351</a></li> 
           <li><a href="#">Text 63</a></li> 
           <li><a href="#"> tex</a></li> 
          </ul> 
      </td> 


      </tr> 

      <tr style="height:25px;"> 
      <td ><div class="arrow-overflow-x"/></td> 
      </tr> 
      </table>

請在這裏檢查輸出。 https://jsfiddle.net/b2w0e9yt/1/

希望這會幫助你。

來源

2016-01-21 13:03:17 Amol

謝謝。但箭頭不應該在底部。它應該始終可見，即使我滾動 – panagulis72

嗨，我已根據您的要求更新請檢查https://jsfiddle.net/b2w0e9yt/1/ – Amol

謝謝！我希望不使用表來解決，但這是一個解決方案。謝謝！ – panagulis72

它很簡單。把<div class="arrow-overflow-x"></div>放在commesse div內。

因爲commesse是display:flex而且您已將該div放在commesse之外。所以，它不符合這一點。

爲了給空間添加之間margin-left:10px到.arrow-overflow-xFiddle

Updated Fiddle

來源

2016-01-21 12:11:14 ketan

謝謝，但我不希望它在底部。看看草稿，它應該始終可見，即使我滾動 – panagulis72

你可以試試這個：

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
body, html { font-size: 15px; padding: 0; margin: 0; overflow-x: hidden;} 
.main:after { clear: both; } 

body { 
    font-family: "Open Sans", Helvetica, sans-serif; 
    color: #89867e; 
    background: #f9f9f9; 
    background-image: url("../img/bg-commesse.jpg"); 
} 

a { 
    color: #333; 
    text-decoration: none; 
} 

a:hover { 
    color: #fff; 
} 
.main { 
    max-width: 82.667em; 
} 

.logo { 
    max-height: 76px; 
} 

.nav ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    font-size: 1.5em; 
    font-weight: 300; 
    max-height: 388px; 
} 

.nav li { 
    display: flex; 
    float: none; 
    width: 100%; 
    height: 164px; 
    border: 2px solid rgba(255,255,255,0.1); 
    -webkit-border: 2px solid rgba(255,255,255,0.1); 
    -moz-border: 2px solid rgba(255,255,255,0.1); 
    -o-border: 2px solid rgba(255,255,255,0.1); 
    margin-bottom: 30px; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 
.nav a { 
    color: rgba(249, 249, 249, .9); 
    text-decoration: none; 
    padding: 0em 0.8em 0em; 
    white-space: nowrap; 
    -webkit-transition: color .5s, background .5s, height .5s; 
    -moz-transition: color .5s, background .5s, height .5s; 
    -o-transition: color .5s, background .5s, height .5s; 
    -ms-transition: color .5s, background .5s, height .5s; 
    transition: color .5s, background .5s, height .5s; 
} 

.nav li span, 
.nav li span.icon { 
    display: inline-block; 
} 

.nav li .icon + span { 
    font-size: 1.3em; 
} 

.icon + span { 
    position: relative; 
    top: -0.1em; 
} 

.commesse { 
    display: flex; 
    align-items: center; 
} 

.commesse ul li { 
    padding: 17px; 
    margin-left: 20px; 
    display: inline; 
    color: #fff; 
    font-size: 28px; 
} 

.commesse ul { 
    white-space: nowrap; 
} 

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

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

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

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

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

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

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

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

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

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

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

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


.user{ 
    border-radius: 50%; 
    display: block; 
    height: 120px; 
    width: 120px; 
} 

.user img{ 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 4px solid #FFFFFF; 
    width: 100%; 
    vertical-align: middle; 
} 

.img-circle { 
    border-radius: 50%; 
} 

.matr a { 
    display: inherit; 
    color: inherit; 
    text-decoration: inherit; 
    padding: inherit; 
    white-space: inherit; 
} 

.arrow-overflow-x { 
    background-image: url("http://lib.store.yahoo.net/lib/artbook/largerightarrowblack.png"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: contain; 
    content: ""; 
    display: table; 
    height: 30px; 
    width: 30px; 
    margin-top: 50px; 


}

DEMO HERE

來源

2016-01-21 12:15:50

謝謝，但它不應該在底部。它應該始終可見，即使我滾動。看看草稿 – panagulis72

不知道你在哪裏與此打算，但如果我理解正確：

.arrow-overflow-x{ 
    position: fixed; 
    left:40; 
    right:0; 
    bottom:0; 
    top:0; 
}

我知道這似乎與其他的答案相同，但如果是這樣，現在你想，我們可以有關於你想要達到什麼的更多信息？

來源

2016-01-21 13:17:56 ickyrr

就像你可以看到草稿，箭頭不應該在底部。它應該始終可見，即使我滾動！ – panagulis72

當你設置position：fixed時，它將在整個頁面中被修復。你只需要調整元素的放置位置。就我而言，即使當我滾動時，我也能看到箭頭，而且它不在底部，它恰好就像你在草稿上顯示的那樣。 – ickyrr

在html中右側插入箭頭

回答

相關問題