I have 9 images in a flex display, when they are not wrapped in <a> tags, they look good.

enter image description here

However, I wanna make these images as clickable. So I wrapped them in <a> tags, however, the format changed to this:

enter image description here

The code is:

<div >
  <button >
    <img src="{{media url="wysiwyg/Round-face-test/arrow.png"}}" alt="">
  </button>
  <button >
    <img src="{{media url="wysiwyg/Round-face-test/arrow.png"}}" alt="">
  </button>
  <div >
    <a
      href="xxxx"
      rel="noopener"
      
      ><img src="{{media
      url="wysiwyg/Round-face-test/Ana_Product_Block_3x_622x233.jpg"}}" alt=""
      >
    </a>
    <a
      href="xxxx"
      rel="noopener "
      ><img src="{{media
      url="wysiwyg/Round-face-test/Logan_Product_Block_3x_622x233.jpg"}}" alt=""
      ></a
    >
    <a
      href="xxxx"
      rel="noopener"
      
      ><img src="{{media
      url="wysiwyg/Round-face-test/Hugh_Product_Block_3x_622x233.jpg"}}" alt=""
      >
    </a>
    <a
      href="xxxx"
      rel="noopener"
      
      ><img src="{{media
      url="wysiwyg/Round-face-test/Miles_Product_Block_3x_622x233.jpg"}}" alt=""
      >
    </a>
    <a
      href="xxxx"
      rel="noopener"
      
      ><img src="{{media
      url="wysiwyg/Round-face-test/Rae_Product_Block_3x_622x233.jpg"}}" alt=""
      ></a
    >
    <a
      href="xxxx"
      rel="noopener"
      
      ><img src="{{media
      url="wysiwyg/Round-face-test/Stella_Product_Block_3x_622x233.jpg"}}"
      alt="" >
    </a>
    <a
      href="xxxx"
      rel="noopener"
      
      ><img src="{{media
      url="wysiwyg/Round-face-test/Peggy_Product_Block_3x_622x233.jpg"}}" alt=""
      ></a
    >
    <a
      href="xxxx"
      rel="noopener"
      
    >
      <img src="{{media
      url="wysiwyg/Round-face-test/Serge2_Product_Block_3x_622x233.jpg"}}"
      alt="" >
    </a>
    <a
      href="xxxx"
      rel="noopener"
      
      ><img src="{{media
      url="wysiwyg/Round-face-test/Wilder_Product_Block_3x_622x233.jpg"}}"
      alt="" ></a
    >
  </div>
</div>

css:

.nine-products-section {
  position: relative;
  padding: 20px;
  display: flex;
  overflow-x: scroll;
}
.product-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
}
.product-image {
  width: 80%;
  display: flex;
  margin: 0 auto;
}

I tried to style the <a> tag, height/ padding/ width. but they all did not work. How can I make these images keep the old style but clickable to redirect to the links?

CodePudding user response：

1. wrap tag with div
2. delete .product-image css code, if needed, add it on tag

CodePudding user response：

I got it fixed by adding

a{
display:contents;
}

in the css file.