0
我试图用Unslider在我的网站，但上一个/下箭头被错误地放在两侧的滑块的底部，而不是在中心。我没有对Unslider CSS进行任何更改，但只对my-slider容器进行了样式设置。Unslider箭头格式化
我无法弄清楚，如何在内容容器中心的箭头，而无需使用绝对位置。你能否建议，可能是什么问题？
以下是我有：
<html>
<body>
<header>
<div class="content">
<div class="left">
Originální pouzdra a obaly<br/>
Tvorba portfolia<br/>
Fotoalba<br/>
Autorské knihy
</div>
<div class="logo"><a href=""><img src="img/logo.png"></a></div>
<div class="right">
Soukupová Petra<br/>
[email protected]<br/>
+420 123 456 789
</div>
</div>
</header>
<div class="content">
<section>
<div class="my-slider">
<ul>
<li><img src="img/petra_soukopova_projekt1.jpg" alt="Projekt 1"></li>
<li>Another slide</li>
<li>My last slide</li>
</ul>
</div>
</section>
<section>
Bla Bla Bla
</section>
<section>
Bla Bla Bla
</section>
</div>
<footer></footer>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/unslider.js"></script>
<script>
jQuery(document).ready(function($) {
$('.my-slider').unslider();
});
</script>
</body>
</html>
CSS：
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
img {
max-width: 100%;
}
header {
width:100%;
height: auto;
}
.content {
width: 1052px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding-bottom: 20px;
}
.left {
display: inline-block;
position: relative;
width: auto;
left: 0;
text-align: left;
vertical-align: top;
z-index: 2;
}
.right {
display: inline-block;
position: relative;
float: right;
width: auto;
text-align: right;
vertical-align: top;
z-index: 2;
}
.logo {
display: inline-block;
position: absolute;
left: 0;
right: 0;
text-align: center;
width: 100%;
z-index: 1;
}
section {
display: block;
height: auto;
}
.my-slider {
height: auto;
max-width: 100%;
display: block;
position: relative;
}
Unslider CSS：
.unslider{overflow:auto;margin:0;padding:0}
.unslider-wrap{position:relative}
.unslider-wrap.unslider-carousel>li{float:left}
.unslider-vertical>ul{height:100%}
.unslider-vertical li{float:none;width:100%}
.unslider-fade{position:relative}
.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8}
.unslider-fade .unslider-wrap li.unslider-active{z-index:10}
.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none}
.unslider-arrow{
position:absolute;
left:120px;
z-index:2;
cursor:pointer;
}
.unslider-arrow.next{left:auto;right:120px}
.unslider-nav ol {
list-style: none;
text-align: center;
}
.unslider-nav ol li {
display: inline-block;
width: 6px;
height: 6px;
margin: 0 4px;
background: transparent;
border-radius: 5px;
overflow: hidden;
text-indent: -999em;
border: 2px solid #fff;
cursor: pointer;
}
.unslider-nav ol li.unslider-active {
background: #fff;
cursor: default;
}
我可以问你为什么不“不能”使用position：absolute;'。这是以容器为中心的最简单方法。另外设置一个jsfiddle会让你更快地帮助你。 –
您应该将滑块视为显示数据的容器，最终让用户控制显示的内容。除了滑块容器，它应该从文档流程中占用必要的空间，没有意义（我知道）为什么不应该使用'position：absolute;'来定位任何滑块组件，无论是幻灯片还是幻灯片控制。实际上，'position：absolute;'是迄今为止最好的显示滑动条内容的方法，同时动画也没有任何缺点。你能否澄清为什么你不希望这个特定的属性对于给定的组件具有这个特定的值？ –
在另一个说明中，您添加了您使用的代码是非常好的，但请注意，如果您使用片段工具（'<>'按钮）创建[mcve]文件，SO用户可以提供更多帮助，从你已经放在你的问题中的代码。如果不这样做，你就有任何人选择帮助你自己做，增加为你的问题提供答案所需的努力。 –