html - 图像不会彼此相邻显示

Question

我试图让我的两张图片紧挨着显示。目前他们一直在彼此下面。我已经搜索了一些帮助，但所有这些都使图像保持不变。我希望你们中的一些人能够理解 html 和 css 并帮助我解决这个问题。

图像在它们各自的表单中，并且两个图像都具有一些样式，因此它们具有悬停效果。

.container {
    position: relative;
    width: 400px;
    height: 400px;
    display: inline-block;
}

.image {
    width: 400px;
    height: 400px;
}

.overlay {
    position: absolute;
    transition: all .3s ease;
    opacity: 0;
    background-color: #eee;
    pointer-events: none;
}

.container:hover .overlay{
    opacity: 1;
}

.text {
    color: white;
    font-family: sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
}

.overlayFade {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #39598cab;
}

.container:hover .overlayFade{
    width: 100%;
}

    <center>
        <form action="FrontController" method="post">
            <h2>Vælg hvilken tag type du ønsker</h2>
            <div class="container">                
                <div class="overlay overlayFade">
                    <div class="text">
                        <h1>Spidst tag</h1>
                        Quick-byg carport med spidst tag
                    </div>
                </div>
                <input type="hidden" name="command" value="PointedRoof">
               <input type="image" src="./IMAGES/spidsTag.jpg" class="image" value="Spidst Tag">
            </div>
        </form></center>
        
        
    <center>
        <form action="FrontController" method="post">
            <div class="container">
                <div class="overlay overlayFade">
                    <div class="text">
                        <h1>Fladt tag</h1>
                        Quick-byg carport med fladt tag
                    </div>
                </div>
                <input type="hidden" name="command" value="FlatRoof">
                <input type="image" src="./IMAGES/fladtTag.png" class="image" value="Fladt tag">
            </div>
        </form>
    </center>

Answer 1

由于 block 属性，图像显示在彼此之下。因为 Center 标记默认具有 block 属性。只需在您的样式表中添加下面的 css

center{display: inline-block;}