Question

我似乎在对齐网站上的内联图像时遇到问题，之前已经做过很多次了，但是无法理解为什么现在不起作用，我已经在Stackoverflow上寻找了类似的问题，但是可以吗？一个答案。

好的更新。.在使用了不同的样式设计方法后，我在IE和firefox中随机打开了该站点，发现该站点运行良好。现在的问题是，为什么不能在Google Chrome上运行？

链接到网站 [http://www.spartansafety.co.uk/shop-by-brand.html]

    @Component
    class Scratch {
      List<Person> person = SpringContext.getBeans(Person.class);
    }

.shop-by-brand li {
  display:inline;
}

Answer 1

我正在修改代码的CSS，但上传complete，使用它，希望您的问题能够得到解决。

    <!DOCTYPE html>
<html>
    <head>
        <title>
        </title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="page-content">
                    <div class="shop-by-brand">
                        <div class="col-sm-12">
                            <ul>
                                <li>
                                    <img alt="Fristads logo" class="img-fluid"
                                    src="assets/img/Fristads_shop.png" style=
                                    "border: 1px solid #ccc;">
                                </li>

                                <li>
                                    <img alt="Pulsar logo" class="img-fluid"
                                    src="assets/img/Pulsar_shop.png" style=
                                    "border: 1px solid #ccc;">
                                </li>

                                <li>
                                    <img alt="Herock" class="img-fluid" src=
                                    "assets/img/Herock_shop.png" style=
                                    "border: 1px solid #ccc;">
                                </li>
<div class="clear"></div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

修改后的CSS

   .shop-by-brand ul li {
float:left;
}
.clear{
clear:both;
}

Answer 2

您可以使用以下CSS解决另一种方法：

.shop-by-brand li {
  display: inline-block;
  vertical-align: top;
}

Answer 3

尝试像下面一样放置图像的宽度*高度

<!DOCTYPE html>
<html>
    <head>
        <title>
        </title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="page-content">
                    <div class="shop-by-brand">
                        <div class="col-sm-12">
                            <ul>
                                <li>
                                    <img alt="Fristads logo" class="img-fluid"
                                    src="assets/img/Fristads_shop.png" height="42" width="42" style=
                                    "border: 1px solid #ccc;">
                                </li>

                                <li>
                                    <img alt="Pulsar logo" class="img-fluid"
                                    src="assets/img/Pulsar_shop.png" height="42" width="42" style=
                                    "border: 1px solid #ccc;">
                                </li>

                                <li>
                                    <img alt="Herock" class="img-fluid" src=
                                    "assets/img/Herock_shop.png" height="42" width="42" style=
                                    "border: 1px solid #ccc;">
                                </li>
<div class="clear"></div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

您的CSS应该是

.shop-by-brand li {
  display:inline;
}

网站图片未与Google Chrome内联对齐

3 个答案: