在轮播导航中使用样式li的问题

Question

我正在研究＆＃34;相关文章＆＃34; 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元素是inline。如果您希望它们与彼此一致，但也可以使用height和width等属性设置样式，则您需要将它们设置为inline-block：

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

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