html - 轮播导航中样式 li 的问题

Question

我正在研究 WordPress 中的“相关文章”小部件轮播导航。小部件工作正常，现在我正在处理样式部分。

这是我目前拥有的:

这是我想要实现的:

问题是我一直停留在样式li 上。问题是，我首先尝试添加 width 和 height ，即使使用 !important 也是如此，但它仍然没有调整大小。所以我需要将这个轮播导航拆分成 8 个相似的部分。我认为 display:inline/display:inline-block 可能会导致这个问题。

CSS:

div.carousel_navigation {
    display: inline-block;
    background: #eeebe7;
    width: 224px;
    position: relative;
    border-right: 1px solid #b1afa9;
    border-left: 1px solid #b1afa9;
    border-bottom: 1px solid #b1afa9;
}

ul li.prev-article, ul li.next-article {
    display: inline;
    width: 28px;
    height: 20px;
}

li.nav-item-links {
    display: inline;
    width: 28px;
    height: 20px;
}

PHP:

<div class="carousel_navigation">
    <ul>
        <li class="prev-article"><a class="prev-article">&lt;</a></li>
        <?php $count = 1; foreach( $related_posts_guides as $post): // variable must be called $post (IMPORTANT) ?>
            <li class="nav-item-links">
                <a href="#item_<?php echo $count; ?>">
                    <?php echo $count; ?>
                </a>
            </li>
        <?php $count++; endforeach; ?>
        <li class="next-article"><a class="next-article">&gt;</a></li>
    </ul>
</div><!-- .carousel_navigation -->

提前致谢!

Answer 1

那是因为您的li 元素是内联。如果您希望它们彼此对齐，但也可以使用 height 和 width 等属性设置样式，则需要将它们设置为 inline-block 改为:

ul li.prev-article, ul li.next-article,
li.nav-item-links {
    display: inline-block;
    width: 28px;
    height: 20px;
}

请注意，我还用逗号连接了您的两个选择器，因为它们的样式属性相同。