Question 208387 in CSS Question posted in
Some basic documentation can be found here.

Css – <a> tag to span multi-row flex items

Is it possible for one <a> tag to span multiple flex items across two or more flex rows?

Example 1:

<div class="inline md:flex md:flex-row md:justify-between">
  <span>word 1</span>
  <span>word 2</span>
  <span>word 3</span>
</div>

<div class="inline md:flex md:flex-row md:justify-between">
  <span>word 4</span>
  <span>word 5</span>
  <span>word 6</span>
</div>

Tailwind Playground link.

.. and somehow have one linkable <a> tag wrap across e.g. word 1-4 or word 2-6 ? This should by default work for both inline and flex layout, depending on breakpoint in media query.

Tags:

2

Answers


  1. 0

    You cannot close a parent tag (In your case the first <div>) without closing all child tags in it (in your case the <a> tag you want to insert), that would be invalid HTML.

    If you try it nevertheless, the browser will try to correct it and close the child tags (i.e. the not-closed <a> tag) before the closing </div> tag, so no, that’s not possible.

    Login or Signup to reply.
  2. 0 
        <a href="#"><div class="
    container-fluid">
    <div class="inline md:flex 
    md:flex-row 
    md:justify-between">
    <span>word 1</span>
    <span>word 2</span>
    <span>word 3</span>
    </div>

    <div class="inline md:flex 
    md:flex-row 
    md:justify-between">
    <span>word 4</span>
    <span>word 5</span>
    <span>word 6</span>
    </div>
    </div></a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search