如何使滑块箭头更高答案

【问题标题】：How to make slider arrows taller如何使滑块箭头更高
【发布时间】：2018-06-27 13:57:52
【问题描述】：

我想创建更高的滑块箭头。我希望它们垂直拉伸。我使用名为 SmartSlider 的 WordPress 插件。我已经尝试过使用 CSS：

.nextend-arrow{
    width:100px!important;
    height:100px!important;
}

我在插件的网站上找到了它。当我仅将高度更改为大于宽度时，箭头仍保持以前的大小... 我也尝试过使用：

.nextend-arrow{
        height:100%!important;
    }

这是上一个箭头（来自 Chrome 检查）：

<div data-ssleft="0+15" data-sstop="height/2-previousheight/2" id="n2-ss-7-arrow-previous" class="n2-ss-widget n2-ss-widget-display-desktop n2-ss-widget-display-tablet n2-ss-widget-display-mobile n2-style-15840d24d130269e6b64e6608dab2b08-heading nextend-arrow n2-ow nextend-arrow-previous  nextend-arrow-animated-fade n2-ib" style="position: absolute; width: 22.4px; height: 280px; top: 2.5px; left: 15px;" role="button" aria-label="Previous slide" tabindex="0"><img class="n2-ow" data-no-lazy="1" data-hack="data-lazy-src" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNDMzIDE1Ljk5MkwyMi42OSA1LjcxMmMuMzkzLS4zOS4zOTMtMS4wMyAwLTEuNDItLjM5My0uMzktMS4wMy0uMzktMS40MjMgMGwtMTEuOTggMTAuOTRjLS4yMS4yMS0uMy40OS0uMjg1Ljc2LS4wMTUuMjguMDc1LjU2LjI4NC43N2wxMS45OCAxMC45NGMuMzkzLjM5IDEuMDMuMzkgMS40MjQgMCAuMzkzLS40LjM5My0xLjAzIDAtMS40MmwtMTEuMjU3LTEwLjI5IiBmaWxsPSIjMzcyZjJmIiBvcGFjaXR5PSIwLjUxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=" alt="previous arrow" style="width: 100%;"></div>

<img class="n2-ow" data-no-lazy="1" data-hack="data-lazy-src" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNDMzIDE1Ljk5MkwyMi42OSA1LjcxMmMuMzkzLS4zOS4zOTMtMS4wMyAwLTEuNDItLjM5My0uMzktMS4wMy0uMzktMS40MjMgMGwtMTEuOTggMTAuOTRjLS4yMS4yMS0uMy40OS0uMjg1Ljc2LS4wMTUuMjguMDc1LjU2LjI4NC43N2wxMS45OCAxMC45NGMuMzkzLjM5IDEuMDMuMzkgMS40MjQgMCAuMzkzLS40LjM5My0xLjAzIDAtMS40MmwtMTEuMjU3LTEwLjI5IiBmaWxsPSIjMzcyZjJmIiBvcGFjaXR5PSIwLjUxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=" alt="previous arrow" style="width: 100%;">

Img 在那个 div 里面。

还有图片： Slider

我希望这些箭头几乎和滑块一样高，但像现在一样细。

这是我的第一篇文章，抱歉我的语言不好，感谢您的帮助。

【问题讨论】：

欢迎来到 SO。请访问help centre 以查看how to ask a good question。如果您没有提供足够的代码来复制问题，我们将无法帮助您 - 请参阅如何创建 minimal reproducible example
但是看图像，它的宽度是 100%，看起来是一个正方形，所以你需要更改 nextend 箭头类的宽度和高度，以使图像更高（图片会自动变大）

标签： html css wordpress slider arrows

【解决方案1】：

我会为他们创建一个容器。给容器一个position: relative;，箭头一个position: absolute;，那么就可以100%使用了。

height: 100%; 现在不起作用的原因是浏览器不知道要与什么进行 100% 比较，因为父元素没有给定的 height。

【讨论】：

真的，我是新来的，对不起。