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：{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

很简单。将<div class="arrow-overflow-x"></div>放在commesse div中。

因为commesse是display:flex并且您已将该div放在commesse之外。所以，它不符合这一点。

在添加margin-left:10px到.arrow-overflow-x Fiddle

之间留出空间

<强> Updated Fiddle

Answer 2

你可以尝试这个：

*, *: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

Answer 3

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

希望这会对你有所帮助。

Answer 4

不知道你在哪里，但如果我理解正确的话：

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

我知道它与其他答案似乎相同但是如果现在你想要的话，我们可以获得更多关于你想要实现的信息吗？

在html的div右侧插入箭头

4 个答案: