Изображения на веб-сайтах не выравниваются в Google Chrome - PullRequest
Новая
       1

Изображения на веб-сайтах не выравниваются в Google Chrome

0 голосов
/ 05 июля 2018

Кажется, у меня возникла проблема с выравниванием изображений на моем сайте, я уже делал это много раз, но не могу понять, почему это не работает, сейчас я искал Stackoverflow для похожих вопросов, но могу ' т ответ.

Ладно, обновитесь .. после того, как поигрался с ним, используя разные методы стилей, я случайно открыл сайт в IE и Firefox и увидел, что сайт работает отлично. Теперь возникает вопрос: почему не работает Google Chrome?

Ссылка на сайт [http://www.spartansafety.co.uk/shop-by-brand.html]

.shop-by-brand li {
  display:inline;
}
    <!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>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Ответы [ 3 ]

0 голосов
/ 05 июля 2018

другой способ решения проблемы с помощью css ниже: 

.shop-by-brand li {
  display: inline-block;
  vertical-align: top;
}
0 голосов
/ 05 июля 2018

Попробуйте поставить ширину изображения * высоту как показано ниже 

<!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;
}
0 голосов
/ 05 июля 2018

Я изменяю CSS кода, но загрузка завершена, используйте его, и, надеюсь, ваша проблема будет решена. 

    <!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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...