1

I have a fieldset with a legend that has a text and a button. I am trying to have the button right align using flexbox, it works fine on Chrome but not on Firefox.

I got a minimum code working to show the problem:

main {
  width: 100%;
}

fieldset legend {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
<main>
  <fieldset>
    <legend>
      Legend text
       <button type="button">
        Button text
      </button>
    </legend>
   </fieldset>
</main>

I want both both elements inside legend to be on the same line, as it showing on Chrome:
as working on chrome

But on Firefox i am getting the following result enter image description here

DCR
  • 12,959
  • 11
  • 46
  • 96
Jorgel
  • 891
  • 2
  • 13
  • 25

2 Answers2

4

just wrap what you need in a div and apply flex there

main {
  width: 100%;
}

 span {
  display: flex;
  justify-content: space-between;
  width: 100vw;
}
<main>
  <fieldset>
    <legend>
    <span>
      Legend text
       <button type="button">
        Button text
      </button>
      </span>
    </legend>
   </fieldset>
</main>
DCR
  • 12,959
  • 11
  • 46
  • 96
  • 1
    do not use a div but a span. only phrasing content and hx tags are allowed inside a legend . https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend & https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element – G-Cyrillus Aug 07 '20 at 21:14
  • @G-Cyrillus thanks, I learn something new every day. – DCR Aug 07 '20 at 23:39
0

Flexbox is not supported with fieldset elements. Float can easily do the job here:

fieldset legend {
  width: 100%;
}

fieldset legend button {
  float: right;
}
<fieldset>
  <legend>
    Legend text
    <button type="button">
            Button text
          </button>
  </legend>

</fieldset>
Temani Afif
  • 211,628
  • 17
  • 234
  • 311