Question

我现在正在调整一个滑块，当它从2-3个图像变化时它会改变类。现在我想要4个图像，它可以正常工作，但是滑块子弹（在滑块图像之间变化）不再位于页面的中心，它稍微对齐。

这是我在HTML中用于更改2-3张图像的脚本。

 <{if $category->getMetaValue('slider_link_two') || $category->getMetaValue('slider_link_three')}>
    <ul class="glide__bullets">
    </ul>
<{/if}>

这是CSS，我为布局道歉，只有缩小的CSS。

.glide__bullets {
	position: absolute;
	bottom: 18px;
	width: 97%;
	text-align: center;
	list-style: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}
.glide__bullets li {
	display: inline-block;
	background-color: gray;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	cursor: pointer
}
.glide__bullets li.active {
	background-color: white
}

正如您所看到的，我做了一个将宽度更改为97％的临时解决方案，但是一旦切换回3个图像，它将看起来很愚蠢。当有4个类别时，我尝试创建一个类来覆盖宽度为97％，但它完全破坏了子弹，但也许只是因为我很难编码。

那么，只有在有4张图像时才能将宽度更改为97％，或者甚至更好 - 一旦有4张图像，将其保持对齐中心。我尝试用另外三个和四个规则运行，但如上所述，它似乎完全破坏了布局。

如果您需要，请提前告知我们！

Answer 1

我测试了你的代码并且对我来说似乎没问题，除非我不理解你想要实现的目标是我得到的结果3 bullets和4 bullets你能否更好地解释它是什么正在努力实现。谢谢:)）

仅在具有{if}规则的CSS中覆盖宽度

1 个答案: