html - 在html中的div右侧插入箭头

Question

我有一些面板由一些元素填充。当这些元素溢出时，会出现水平滚动条。我想在面板右侧放一个箭头。我将箭头放入面板中，但它位于所有元素的底部。我希望它是可见的，定位在这个草稿中:

这是 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谢谢!

Answer 1

我在 Table 标签的帮助下进行了尝试。

            <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/

希望对您有所帮助。