HTML CSS 联动错误

Question

我在我的 html 代码和所有 HTML 编辑器中链接了样式 css，除了在我的网站上，我的代码工作得非常好。要求：超链接图像应水平滚动。预期输出：所有图像都带有超链接，当页面打开时它们会自动滚动。实际输出：所有图像都带有超链接，但图像在我的页面上是垂直链接的。在所有编辑器上，我都看到图像在滚动。

网站是wordpress网站这是我的代码片段。 CSS 来源：designshack.com

<!DOCTYPE html>
<html>
 <head>
 <style>

    {margin: 0; padding: 0;}

body {

    background: url('dark_geometric.png');
    }

#container {
    width: 1000px;
    overflow: hidden;
    margin: 50px auto;
    background: white;
        }

/*header*/
header {
    width: 800px;
    margin: 40px auto;
    }

header h1 {
    text-align: center;
    font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
    }

header p {
    font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
    text-align: justify;
    }

/*photobanner*/
    .photobanner {
        height: 233px;
        width: 3550px;
        margin-bottom: 80px;
            }

/*keyframe animations*/
    .first {
        -webkit-animation: bannermove 30s linear infinite;
        -moz-animation: bannermove 30s linear infinite;
        -ms-animation: bannermove 30s linear infinite;
        -o-animation: bannermove 30s linear infinite;
        animation: bannermove 30s linear infinite;
        }

@keyframes bannermove {
    0% {
    margin-left: 0;
    }

    100% {
    margin-left: -2125px;
    }
            }

@-moz-keyframes bannermove {
0% {
    margin-left: 0;
}

100% {
    margin-left: -2125px;
    }
        }

@-webkit-keyframes bannermove {
0% {
    margin-left: 0;
}

100% {
    margin-left: -2125px;
}
    }

@-ms-keyframes bannermove {
0% {
    margin-left: 0;
}

100% {
    margin-left: -2125px;
}
    }

@-o-keyframes bannermove {
0% {
    margin-left: 0;
}

100% {
    margin-left: -2125px;
}
    }

.photobanner {
    height: 233px;
    width: 3550px;
    margin-bottom: 80px;
    }

.photobanner img {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
        }

.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    }
</style>
</head>
<body>

<div class="photobanner">
<a href="mysite">
    <img class="first" src="me.jpg" alt="" /> </a>
     <a href="site"
<img src="ns.jpg" alt="" /></a>
    <a href="mysite" 
<img src="gu.jpg" alt="" /></a>
    <a href="mysite" 
<img src="ri.jpg" alt="" /></a>
<a href="mysite" 
<img src="me.jpg" alt="" /></a>
<a href="mysite" 
<img src="ns.jpg" alt="" /></a>
<a href="mysite" 
<img src="gu.jpg" alt="" /></a>
<a href="mysite" 
<img src="ri.jpg" alt="" /></a>
    </div>

</body>
</html>

Answer 1

首先修正你的 html 语法？:

<div class="photobanner">
    <a href="mysite">
        <img class="first" src="me.jpg" alt="" />
    </a>
    <a href="site">
        <img src="ns.jpg" alt="" />
    </a>
    <a href="mysite">
        <img src="gu.jpg" alt="" />
    </a>
    <a href="mysite">
        <img src="ri.jpg" alt="" />
    </a>
    <a href="mysite">
        <img src="me.jpg" alt="" />
    </a>
    <a href="mysite">
        <img src="ns.jpg" alt="" />
    </a>
    <a href="mysite">
        <img src="gu.jpg" alt="" />
    </a>
    <a href="mysite">
        <img src="ri.jpg" alt="" />
    </a>
</div>

HTML CSS 联动错误

HTML CSS linkage error

html

css

wordpress

horizontal-scrolling

horizontalscrollview