无法使用<a>

Question

So I have 3 divs next to each other just how I want. However when I add the element the sizing and margins get all messy. I know you have to have the links display set to block but that doesn't fix it, I've tried some things but all of that didn't help. I'd like to keep the margins and size the same for all the links.

调整我的div

HTML：

    <div id="submenu">
        <div id="items">
            <a href="index.html"><div id="item1"><p>HOME</p></div></a>
            <a href="overons.html"><div id="item2"><p>OVER ONS</p></div></a>
            <a href="contact.html"><div id="item3"><p>NEEM DIRECT CONTACT OP</p></div></a>
        </div>
    </div>

CSS：

#submenu {
    padding-top: 50px;
    display: block;
    margin-top: 130px;
    height: 30vh;
    width: 1400px; 
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 100;
}

#items {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 1300px;
    height: 350px;
    padding: 0 10px 0 10px;
}

#item1, #item2, #item3 {
    width: 450px;
    height: 250px;
    margin-left: 20px;
    margin-right: 20px;
    font-family: 'roboto';
    font-weight: bolder;
    font-size: 1em;
    overflow: hidden;
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;

}

#items a {
    display: inline-block;
    width: 450px;
    height: 250px;

}

#item1:hover, #item2:hover, #item3:hover {
      transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand'); /* IE6 and 7 */ 
}

#item1 {
    background-color: cornflowerblue;
    margin-left: 0px;
}

#item2 {
    background-image: url(placeholder2.jpg);
    background-size: cover;
    background-position: center;
}

#item3 {
    background-image: url(placeholder3.jpg);
    background-size: cover;
    background-position: center;
    margin-right: 0px;

}

Answer 1

您可以尝试在#items

中的flex-direction: row;之后添加display: flex;

和你的#image

height: auto; 
width: auto; 
max-width: 300px; 
max-height: 300px;